/    Sign up×
Community /Pin to ProfileBookmark

Variables inside tags inside variables!

Copy linkTweet thisAlerts:
Mar 31.2020

Hello There

I have this, running inside a loop (j).

“`
if (match === true) {
finalText = “<button onclick=’console.log(j);searchText(j);’ class=’w3-btn w3-yellow’>”+finalText+”</button>”;
}
“`

I know the value of j to be 2.
If I console the value outside of the variable – I get 2.
But – when the code is running and I press the button… it consoles 4!
Why would this behave differently?

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMar 31.2020 — Unfortunately you did not post the complete code, but I think I got it: When the button is clicked, the loop has finished and `j</C> has it's final value, not the value when the button was created.<br/>
Can be fixed easily by using <C>let</C> instead of <C>var</C> when defining <C>j</C>, like this:<br/>
<C>for (let j = 0; j &lt; finalvalue; j++) {`
Copy linkTweet thisAlerts:
@stilts77authorMar 31.2020 — @Sempervivum#1616795 Now, it gives me undefined!
Copy linkTweet thisAlerts:
@SempervivumMar 31.2020 — Please post your complete code, expecially the code for the for-loop. Did you take over the variable name `finalvalue`? You need to replace this by your own variable.
Copy linkTweet thisAlerts:
@stilts77authorMar 31.2020 — There is a lot of code...

for (i = 0; i &lt; newvocabpasted.length; i++) {
// console.log("Vocab number:"+i+"("+newvocabpasted[i]+")");
// start a loop as long as the text array

<i> </i> for (j = 0; j &lt; newtextpasted.length; j++) {
<i> </i> // console.log("Text number:"+j+"("+newtextpasted[j]+")");

<i> </i> //console.log("Result text (before checking): "+resulttext);
<i> </i> // find the length of the current synonym list
<i> </i> olength = obj[i].length;
<i> </i> // console.log("Synonym list length:"+olength);
<i> </i> // start a loop the size of that list

<i> </i> for (m = 0; m &lt; olength; m++) {

<i> </i> match = false;
<i> </i> //console.log("Check for match: "+obj[i][m].word+"/"+newtextpasted[j]);
<i> </i> text = newtextpasted[j];
<i> </i> // check for &lt;p&gt; tags
<i> </i> // reset boolean variables
<i> </i> backtag = false;
<i> </i> fronttag = false;
<i> </i> // find length of original string
<i> </i> textlength = newtextpasted[j].length;
<i> </i> // look at first 3 characters
<i> </i> texttagfront = newtextpasted[j].substring(0, 3);
<i> </i> if (texttagfront === "&lt;p&gt;") {
<i> </i> //console.log("There is a tag on front!");
<i> </i> fronttag = true;
<i> </i> text = text.substring(3, textlength);
<i> </i> //console.log("Text after front tag check:"+text);
<i> </i> }
<i> </i> // look at last 4 characters
<i> </i> textlength = newtextpasted[j].length;
<i> </i> texttagback = newtextpasted[j].substring(textlength-4, textlength);
<i> </i> //console.log("Last 4 character:"+texttagback);
<i> </i> if (texttagback === "&lt;/p&gt;") {
<i> </i> //console.log("There is a tag on back!");
<i> </i> backtag = true;
<i> </i> text = text.substring(0, textlength-4);
<i> </i> //console.log(text);
<i> </i> }
<i> </i> //make sure we have variable with no tags for later
<i> </i> textaftertags = text;
<i> </i> //strip all but letters from the text


<i> </i> text = text.replace("&amp;quot;", '');
<i> </i> text = text.replace("&amp;#39;", '');
<i> </i> text = text.replace("&amp;nbsp;", ' ');
<i> </i> text = text.replace("&amp;hellip;", ' ');
<i> </i> text = text.replace(/[^a-zA-Z]/g, '');


<i> </i> text = text.toLowerCase();
<i> </i> //check - is the synoynm matching the word in the text?
<i> </i> // console.log(text);
<i> </i> if ((obj[i][m].word === text)&amp;&amp; c!==j) {
<i> </i> console.log("Match!");
<i> </i> console.log("Vocab i="+i);
<i> </i> console.log("Orig text j="+j);
<i> </i>
<i> </i> //set match to true
<i> </i> match = true;
<i> </i> finalText = newvocabpasted[i];
<i> </i> //check for capital letter
<i> </i> if (textaftertags.charAt(0) === text.charAt(0).toUpperCase()) {
<i> </i> // console.log("There was a capital");
<i> </i> finalText = newvocabpasted[i].charAt(0).toUpperCase() + newvocabpasted[i].slice(1).toLowerCase();
<i> </i> }
<i> </i> // console.log(obj[i][m].word+"/"+text);


// if there are ... marks at the end

<i> </i> var result = textaftertags.substring(textaftertags.length-8, textaftertags.length);
<i> </i> if (result.includes("&amp;hellip;")) {
<i> </i> var res2 = '...';
<i> </i> // console.log("Ellipsis at the end!");
<i> </i> //finalText = finalText+res;
<i> </i> var q = true;
<i> </i> var textaftertagsnoquotes = textaftertags.replace("&amp;hellip;", "");
<i> </i> result = textaftertagsnoquotes.charCodeAt(textaftertagsnoquotes.length-1);
<i> </i> var res = textaftertagsnoquotes.charAt(textaftertagsnoquotes.length-1);
<i> </i> if (result &gt; 31 &amp;&amp; result &lt; 64) {
<i> </i> console.log("Punctuation at the end!");
<i> </i> finalText = finalText+res+res2;
<i> </i> } else {
<i> </i> finalText = finalText+res2;
<i> </i> }
<i> </i> }


<i> </i> // if there are " quote marks at the end

<i> </i> result = textaftertags.substring(textaftertags.length-8, textaftertags.length);
<i> </i> if (result.includes("&amp;quot;")) {
<i> </i> res2 = '"';
<i> </i> //console.log("Quotes at the end!");
<i> </i> //finalText = finalText+res;
<i> </i> q = true;
<i> </i> textaftertagsnoquotes = textaftertags.replace("&amp;quot;", "");
<i> </i> result = textaftertagsnoquotes.charCodeAt(textaftertagsnoquotes.length-1);
<i> </i> res = textaftertagsnoquotes.charAt(textaftertagsnoquotes.length-1);
<i> </i> if (result &gt; 31 &amp;&amp; result &lt; 64) {
<i> </i> //console.log("Punctuation at the end!");
<i> </i> finalText = finalText+res+res2;
<i> </i> } else {
<i> </i> finalText = finalText+res2;
<i> </i> }
<i> </i> }
<i> </i> // if there are '' quote marks at the end

<i> </i> result = textaftertags.substring(textaftertags.length-8, textaftertags.length);
<i> </i> if (result.includes("&amp;#39;")) {
<i> </i> res2 = "'";
<i> </i> // console.log("Quotes at the end!");
<i> </i> //finalText = finalText+res;
<i> </i> q = true;
<i> </i> textaftertagsnoquotes = textaftertags.replace("&amp;#39;", "");
<i> </i> result = textaftertagsnoquotes.charCodeAt(textaftertagsnoquotes.length-1);
<i> </i> res = textaftertagsnoquotes.charAt(textaftertagsnoquotes.length-1);
<i> </i> if (result &gt; 31 &amp;&amp; result &lt; 64) {
<i> </i> //console.log("Punctuation at the end!");
<i> </i> finalText = finalText+res+res2;
<i> </i> } else {
<i> </i> finalText = finalText+res2;
<i> </i> }
<i> </i> }



<i> </i> //if there is punctuation at end
<i> </i> if (q !== true) {
<i> </i> result = textaftertags.charCodeAt(textaftertags.length-1);
<i> </i> res = textaftertags.charAt(textaftertags.length-1);
<i> </i> if (result &gt; 31 &amp;&amp; result &lt; 64) {
<i> </i> // console.log("Punctuation at the end!");
<i> </i> finalText = finalText+res;
<i> </i> }
<i> </i> }
<i> </i> q = false;

<i> </i> // if there are " quote marks at the start

<i> </i> result = textaftertags.substring(0, 8);
<i> </i> if (result.includes("&amp;quot;")) {
<i> </i> res = '"';
<i> </i> // console.log("Quote at the start!");
<i> </i> //finalText = res+finalText;
<i> </i> q = true;
<i> </i> //sort out capital
<i> </i> textaftertagsnoquotes = textaftertags.replace("&amp;quot;", "");
<i> </i> if (textaftertagsnoquotes.charAt(0) === textaftertagsnoquotes.charAt(0).toUpperCase()) {
<i> </i> // console.log("There was a capital");
<i> </i> finalText = res+newvocabpasted[i].charAt(0).toUpperCase() + newvocabpasted[i].slice(1).toLowerCase();
<i> </i> } else {
<i> </i> finalText = res+finalText;
<i> </i> }
<i> </i> }
<i> </i> // if there are '' quote marks at the start

<i> </i> result = textaftertags.substring(0, 8);
<i> </i> if (result.includes("&amp;#39;")) {
<i> </i> res = "'";
<i> </i> // console.log("Punctuation at the start!");
<i> </i> finalText = res+ finalText;
<i> </i> q = true;
<i> </i> //sort out capital
<i> </i> textaftertagsnoquotes = textaftertags.replace("&amp;#39;", "");
<i> </i> if (textaftertagsnoquotes.charAt(0) === textaftertagsnoquotes.charAt(0).toUpperCase()) {
<i> </i> // console.log("There was a capital");
<i> </i> finalText = res+newvocabpasted[i].charAt(0).toUpperCase() + newvocabpasted[i].slice(1).toLowerCase();
<i> </i> } else {
<i> </i> finalText = res+finalText;
<i> </i> }
<i> </i> }


<i> </i> //if there is punctuation at start
<i> </i> if (q !== true) {
<i> </i> result = textaftertags.charCodeAt(0);
<i> </i> res = textaftertags.charAt(0);
<i> </i> if (result &gt; 31 &amp;&amp; result &lt; 64) {
<i> </i> // console.log("Punctuation at the start!");
<i> </i> finalText = res+finalText;
<i> </i> }
<i> </i> }
<i> </i> q = false;

<i> </i> // if there was a match
<i> </i> if (match === true) {
<i> </i>
<i> </i> finalText = "&lt;button onclick='console.log(j);searchText(j);' class='w3-btn w3-yellow'&gt;"+finalText+"&lt;/button&gt;";
<i> </i> }
<i> </i> //if there was a tag at the front
<i> </i> if (fronttag === true) {
<i> </i> finalText = "&lt;p&gt;"+finalText;
<i> </i> }
<i> </i> //if there was a tag at the end
<i> </i> if (backtag === true) {
<i> </i> finalText = finalText+"&lt;/p&gt;";
<i> </i> }

<i> </i> //set the value in the resulttext to the corresponding vocab element
<i> </i> resulttext[j] = finalText;
<i> </i> //console.log("Result text (after checking): "+resulttext);
<i> </i> break;
<i> </i> }
<i> </i> }
<i> </i> }
<i> </i> }
In the original code I posted, I'm dynamically adding a button around a piece of text that matches text from another array.

Outside of the button tag - the iteration (j) consoles correctly. But inside the variable I'm making - it doesn't behave. I don't know why!
Copy linkTweet thisAlerts:
@SempervivumMar 31.2020 — Seens to me that I was wrong. Try this code:

`finalText = "&lt;button onclick='console.log(" + j + ");searchText(" + j + ");' class='w3-btn w3-yellow'&gt;"+finalText+"&lt;/button&gt;";</C>

BTW: Please use code tags when posting code: <C>your code here`

I edited your posting accordingly.
Copy linkTweet thisAlerts:
@stilts77authorMar 31.2020 — Well, thank you very much.

How was it arriving at a larger number? Is it to do with the time it takes to render the button?
Copy linkTweet thisAlerts:
@SempervivumMar 31.2020 — No, there is no relation to the rendering time. I tried to explain it in my first answer: The script runs, creates the buttons and terminates. Afterwards the value of `j</C> is equal to <C>newtextpasted.length</C>. The button is pressed later on, after a lot of seconds or even some minutes and then the script takes that value.

However in the corrected version the current value of the variable <C>j` is inserted into the HTML of the button.

You can check this by viewing the page source.
Copy linkTweet thisAlerts:
@stilts77authorMar 31.2020 — Thank you for the explanation.
×

Success!

Help @stilts77 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...