Javascript String variable not updating-CodePudding

I have a var word_matching this variable should is used for storing a string of html. The problem is that the string is not getting updated

 if(!htmlGenerated){
        word_matching.innerHTML = '';
        console.log("generating textarea");
        //create textarea
        word_matching.innerHTML = '<textarea id="html" value=';
        console.log(word_matching.innerHTML);
        //create key inputs
        for (let i = 0; i < elArray.length; i  ){
          word_matching.innerHTML  = '<div id="s' i '"class="draggyBox-small">' elArray[i] '</div>\n' 
        }
  
        //create description inputs
        for (let i = 0; i < dlArray.length; i  ){
          word_matching.innerHTML  = '<table id="tablestyle"><td >\n \t\t<div id="t' i '"class="ltarget"></div>\n \t</td >\n \t<td  id="d2">' dlArray[i] '</td >\n </tr>\n</table>'
        }

        
        word_matching.innerHTML  = '<div id = "program1" style="border: 1px solid #EB0D1B; width: 360px; font-family: courier; font-size: 100.5%; margin: 0px auto; border: 1px; text-align: center; margin-top: 5px;"> <span style="padding: 3px"> <button id ="one" class="button" type="button" onClick="one()">Show Answer</button> <button id = "resetButton" class="button" type="button" onClick="reset()">Reset</button><button id = "renderHTMLButton" class="button" type="button" onClick="render_html()">Render html</button> <span id = "audio" style=""> <a href="" title="Turns Text-to-Speech Output On or Off" class="menulink" style="text-decoration: none;"><img id="bg" src="audioOff.png" height="30" width="30" style="margin-bottom:-10px; padding-bottom:-20px;"/> </a> </span> </span> </div> </div></div>">';
        htmlGenerated = true;
        console.log("________ word matching _________");
        console.log(word_matching.innerHTML);
        console.log("________ word matching _________");
      }
    }

everything after the second initialization works. The code below prints out a blank line

        //create textarea
        word_matching.innerHTML = '<textarea id="html" value=';
        console.log(word_matching.innerHTML);

The code below

        console.log("________ word matching _________");
        console.log(word_matching.innerHTML);
        console.log("________ word matching _________");

prints out

________ word matching _________
Section5_3.html:131 <div id="s0" class="draggyBox-small">k1</div>
<div id="s1" class="draggyBox-small">k2</div>
<table id="tablestyle"><tbody><tr><td>
        <div id="t0" class="ltarget"></div>
    </td>
    <td id="d2">d1</td>
 </tr>
</tbody></table><table id="tablestyle"><tbody><tr><td>
        <div id="t1" class="ltarget"></div>
    </td>
    <td id="d2">d2</td>
 </tr>
</tbody></table><div id="program1" style="border: 1px solid #EB0D1B; width: 360px; font-family: courier; font-size: 100.5%; margin: 0px auto; border: 1px; text-align: center; margin-top: 5px;"> <span style="padding: 3px"> <button id="one" class="button" type="button" onclick="one()">Show Answer</button> <button id="resetButton" class="button" type="button" onclick="reset()">Reset</button><button id="renderHTMLButton" class="button" type="button" onclick="render_html()">Render html</button> <span id="audio" style=""> <a href="" title="Turns Text-to-Speech Output On or Off" class="menulink" style="text-decoration: none;"><img id="bg" src="audioOff.png" height="30" width="30" style="margin-bottom:-10px; padding-bottom:-20px;"> </a> </span> </span> </div> "&gt;
________ word matching _________

I've tried printing out the line. Can anyone see the error in this code? Any help would be greatly appreciated.

CodePudding user response：

This is because your statement creates an incorrect html template. This will not be set to set as innerHTML as the template is incorrect.

word_matching.innerHTML = '<textarea id="html" value=';

Try setting some valid html template for example

word_matching.innerHTML = '<textarea id="html" value="test"></textarea>';

Working Fiddle

const word_matching = document.getElementById("word_matching");

word_matching.innerHTML = '<textarea id="html" value=';
// This wont work
console.log(word_matching.innerHTML);

word_matching.innerHTML = '<textarea id="html" value="test"></textarea>';
// This will work
console.log(word_matching.innerHTML);

<div id="word_matching"></div>

CodePudding user response：

//has the html already been generated? 
      if(!htmlGenerated){

        //create textarea
        textarea = document.createElement("textarea");
        
        // initialize blank html
        html = '';

        //create key inputs
        for (let i = 0; i < elArray.length; i  ){
          html  = '<div id="s';
          html  =i;
          html  ='\" class=\"draggyBox-small\">';
          html  = elArray[i];
          html  ='</div>\n';
        }
  
        //create description inputs
        html  = '<table id=\"tablestyle\"><td >\n'
        for (let i = 0; i < dlArray.length; i  ){
          html  = '\t\t<div id=\"t';
          html  =i;
          html  ='" class=\"ltarget\"></div>\n \t</td >\n \t<td  id=\"d2\">'
          html  =dlArray[i];
          html  ='</td >\n </tr>\n';
        }
        html  = '</table>';

        // html generation is done.
        htmlGenerated = true;
        
        textarea.value = html;
        results.appendChild(textarea);

        // Generate reset, show answer, , and render html buttons
        controls = document.createElement("div");
        controls.setAttribute("id","program1");
        controls.setAttribute("style","border: 1px solid #EB0D1B; width: 360px; font-family: courier; font-size: 100.5%; margin: 0px auto; border: 1px; text-align: center; margin-top: 5px;");
        controls.innerHTML  =  '<span style="padding: 3px"> <button id ="one" class="button" type="button" onClick="one()">Show Answer</button> <button id = "resetButton" class="button" type="button" onClick="reset()">Reset</button><button id = "renderHTMLButton" class="button" type="button" onClick="render_html()">Render html</button> <span id = "audio" style=""> <a href="" title="Turns Text-to-Speech Output On or Off" class="menulink" style="text-decoration: none;"><img id="bg" src="audioOff.png" height="30" width="30" style="margin-bottom:-10px; padding-bottom:-20px;"/> </a> </span> </span>';
      }
    }

CodePudding user response：

In jQuery land answer would be as below:

jQuery(function() {
let word = $('#word-matching')
word.html('whatever you'd like the HTML to be')
})

HTML
<div id="word-matching"></div>

It's important to note you should use an ID when using .html as it will replace the HTML contents in all selectors which in most cases you will not want.