Javascript function - text manipulation

Javascript function - text manipulation

  

Hi,

I'm building web application in OutSystems. I'm trying to change the display of a text using java script.


function abc(){

var customizedtext = '<span class='mystyle'>' + document.getElementById("demo").innerHTML + '</span>';

document.getElementById("demo").innerHTML = customizedtext;

}


Note: I'm using 'mystyle' css here which is just changing the color of the text.


Problem is, I'm not able to get expected value for customizedtext.

It seems the issue is at this line:

var customizedtext = '<span class='mystyle'>' + document.getElementById("demo").innerHTML + '</span>';


Somehow the quotes (' or "") are not getting interpreted as expected in the above line.

Can anyone please assit what I'm missing here.


Many thanks,

Hello!

The quotes will cause some issues for you, but is there any reason you can't do something more like:

document.getElementById('demo').classList = 'mystyle';?

Or, document.getElementById('demo').parentElement.classList = 'mystyle'; if you need the span around it?

Hey, this seems to be an easy one!

Let's take a look at this line, piece by piece.

var customizedtext = '<span class='mystyle'>' + document.getElementById("demo").innerHTML + '</span>';

Javascript uses '' and "" to create strings (strings are primitive in javascript) you could also use new String("object");  to create a string object. (but forget that for now haha).


So at the first part (left side of the = symbol) you define the variable, so far so good!
At the right part you assign the value to this variable. Which consists of 3 parts (seperated each by +, you are contatinating multiple strings together!)

The first part (which is most likely to contain your error):
'<span class='mystyle'>'

Will get formatted like: '<span class='mystyle'>'
The red text (mystyle) will get formatted as code! But that's not what you want right?

Right now you have 2 options, 1 is to change 'mystyle' to "mystyle" instead (double quotes will get picked up as text instead code!) or to instead change the outer quotes to double quotes.
So:

"<span class='mystyle'>"

A third option would be to escape the '' quotes with backslashes (\) these backslashes can escape special characters even within a string!

It's funny that at the second part you use: document.getElementById("demo").innerHTML with double quotes :)

For javascript it does not matter if you use '' or "", as long as it's within those 2 symbols it will be treated as a string.

For more questions, feel free to ask!

You can also look at this: https://www.w3schools.com/js/ to start learning some more about javascript. (try looking at Jquery too! it's so much more effecient)

Joey Moree wrote:

Hey, this seems to be an easy one!

Let's take a look at this line, piece by piece.

var customizedtext = '<span class='mystyle'>' + document.getElementById("demo").innerHTML + '</span>';

Javascript uses '' and "" to create strings (strings are primitive in javascript) you could also use new String("object");  to create a string object. (but forget that for now haha).


So at the first part (left side of the = symbol) you define the variable, so far so good!
At the right part you assign the value to this variable. Which consists of 3 parts (seperated each by +, you are contatinating multiple strings together!)

The first part (which is most likely to contain your error):
'<span class='mystyle'>'

Will get formatted like: '<span class='mystyle'>'
The red text (mystyle) will get formatted as code! But that's not what you want right?

Right now you have 2 options, 1 is to change 'mystyle' to "mystyle" instead (double quotes will get picked up as text instead code!) or to instead change the outer quotes to double quotes.
So:

"<span class='mystyle'>"

A third option would be to escape the '' quotes with backslashes (\) these backslashes can escape special characters even within a string!

It's funny that at the second part you use: document.getElementById("demo").innerHTML with double quotes :)

For javascript it does not matter if you use '' or "", as long as it's within those 2 symbols it will be treated as a string.

For more questions, feel free to ask!

You can also look at this: https://www.w3schools.com/js/ to start learning some more about javascript. (try looking at Jquery too! it's so much more effecient)

Hi Joey,


Thanks for your reply.

I have used the below code in javascript in a html file (not in OuTSytems) and it is working fine.

var customizedtext = '<span class="mystyle">' + document.getElementById("demo").innerHTML + '</span>'

But the same when I use in OutSystems, its showing error.I'm using it inside an x,y expression.


Thanks,


Craig St. Jean wrote:

Hello!

The quotes will cause some issues for you, but is there any reason you can't do something more like:

document.getElementById('demo').classList = 'mystyle';?

Or, document.getElementById('demo').parentElement.classList = 'mystyle'; if you need the span around it?

Hi Craig,

Thanks for your reply.

I tried to use both, but seems the style is not getting called. I even tried with document.getElementById('demo').parentElement.classList.add = 'mystyle' , but the text is not getting changed.

Am I missing anything here?


Thanks



Biplab Pal wrote:

Joey Moree wrote:

Hey, this seems to be an easy one!

Let's take a look at this line, piece by piece.

var customizedtext = '<span class='mystyle'>' + document.getElementById("demo").innerHTML + '</span>';

Javascript uses '' and "" to create strings (strings are primitive in javascript) you could also use new String("object");  to create a string object. (but forget that for now haha).


So at the first part (left side of the = symbol) you define the variable, so far so good!
At the right part you assign the value to this variable. Which consists of 3 parts (seperated each by +, you are contatinating multiple strings together!)

The first part (which is most likely to contain your error):
'<span class='mystyle'>'

Will get formatted like: '<span class='mystyle'>'
The red text (mystyle) will get formatted as code! But that's not what you want right?

Right now you have 2 options, 1 is to change 'mystyle' to "mystyle" instead (double quotes will get picked up as text instead code!) or to instead change the outer quotes to double quotes.
So:

"<span class='mystyle'>"

A third option would be to escape the '' quotes with backslashes (\) these backslashes can escape special characters even within a string!

It's funny that at the second part you use: document.getElementById("demo").innerHTML with double quotes :)

For javascript it does not matter if you use '' or "", as long as it's within those 2 symbols it will be treated as a string.

For more questions, feel free to ask!

You can also look at this: https://www.w3schools.com/js/ to start learning some more about javascript. (try looking at Jquery too! it's so much more effecient)

Hi Joey,


Thanks for your reply.

I have used the below code in javascript in a html file (not in OuTSytems) and it is working fine.

var customizedtext = '<span class="mystyle">' + document.getElementById("demo").innerHTML + '</span>'

But the same when I use in OutSystems, its showing error.I'm using it inside an x,y expression.


Thanks,



Ah yes, I'm so very sorry!


outsystems only uses "" to create strings :(

So the total string inside your expression should be:

"function abc(){

var customizedtext = '<span class=\'mystyle\'>' + document.getElementById('demo').innerHTML + '</span>';

document.getElementById('demo').innerHTML = customizedtext;

}"


The green double quotes are used so outsystems accepts the input of your expression (you can't write pure javascript in an expression I'm afraid, the input has to be a string)

The red \' is used to escape the ' characters, so the javascript compiler will recognize the ' within the string as a character instead of a symbol used in coding.


However, instead of writing this code into an expression, a webblock and webscreen both have a part where you can enter javascript, if you paste this code:

function abc(){

var customizedtext = '<span class="mystyle">' + document.getElementById("demo").innerHTML + '</span>';

document.getElementById('demo').innerHTML = customizedtext;

}

In the javascript section, the function will be available.


Now, I've seen you commenting that the text is not being added.
Well that's very simple, this here above, is a function, a function does nothing unless it's being called.

So somewhere in your code (preferably after the definition of this function) you have to call function abc(){....}

You can do this by writing abc(); somewhere within script tags, a onfocus/onchange/onblur of an element or right below the definition of this function.

Hi Biplab,

Is the element ID "demo" from runtime? OutSystems appends extra characters to your design time ID.


Hi Biplab,

In support to all the previous comments what Stanley Mok highlighted is also one of the important point to be considered while writing JS in OutSystems. I had created a small demo web screen which demonstrate and implements your requirement in ground level. 

Demo Link

Hope it helps.


Kind Regards,

Benjith Sam