title: Use onclick="myFunction()" in Variable JS
body: <p>I have a <code>div</code> which has <code>onclick="myFunction()"</code> for '<strong>Show / hide</strong>' <code>id="myTable"</code>.</p>
  
  <p>in <strong>file.js</strong> I use format like this :</p>
  
  <pre><code>function example () {
     var popup = '&lt;div class="box"&gt;' +
          '&lt;div onclick="myFunction()" id="button"&gt;&lt;/div&gt;' +
          '&lt;div id="myTable" class="myTable"&gt;&lt;/div&gt;' +
          '&lt;/div&gt;'; //box
  }; //End function example()
  
  
  /**** How to make myFunction () work? ****/
  
  function myFunction() {
     var x = document.getElementById("myTable");
         if (x.style.display === "none") {
             x.style.display = "block";
         } else {
             x.style.display = "none";
         }
  }; // End function myFunction()
  </code></pre>
  
  <p>I want to <strong>Show and hide</strong> div id <code>myTable</code> <strong>using</strong> <code>onclick="myFunction()"</code> .</p>
  
  <p>If using html format on w3school, this works.</p>
  
  <p>But I use the <strong>.js</strong> file format.
  I cant add the html code other than using the variable </p>
  
  <p><code>var ex = '&lt;htmlcode&gt;&lt;/htmlcode&gt;';</code></p>
  
  <p><a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show" rel="nofollow noreferrer">W3Schools Toggle Show/Hide</a></p>