JavaScript code causes <header> and <nav> elements not to show in browser

Question

I am working on a webpage where scripts in both the head and section elements are used to output a table where the cells in the table change to a random color when clicked. The problem is the header and nav elements aren't showing when the page is loaded, but the table does and the scripts are working fine.

Being that I'm using a nested loop in the body section, I checked around this site for solutions but didn't see anything that could help me. I also tried to move around the table elements concatenated to a string variable, but that didn't work either. Finally(if this helps), I floated the nav element to the left in my external style sheet(not shown), and floated the section element to the left as well.

In the head element(including embedded css):

<script>
function myFunction(e) {
      var colorstring = ["green", "lightgreen", "blue", "pink", "yellow", "purple", "brown", "red", "orange", "black"];
      var index = Math.floor((Math.random() * 9) + 1);
      e.innerHTML = colorstring[index];
      e.style.backgroundColor = colorstring[index];
    }
</script>

<style>
    h3 {
        text-align: center;
    }

   table {
       margin: 0 auto;
       width: 50%;
      }

   table,td {
       border: 1px solid;
       border-collapse: collapse;
   }

   table td {
       text-align: center;
       width: 25%;
       height: 1.5em;
   }
</style>

In the header, nav, and section element(all from the body element):

<header>
    <img src="Fonts/Proj6_heading.png" />
</header>

<nav class="verticalNAV">
    <ul>
        <li><a href="Home_Page.html">Our Services</a></li>
        <li><a href="Growing_Pumpkins.html">Growing Pumpkins</a></li>
        <li><a href="Currency_Converter.html">Currency Converter</a></li>
        <li><a href="Add_Table_Block.html">Add Table Block</a></li>
    </ul>
</nav>

<section>
    <h2>&#60;Add Table Block&#62;</h2>

    <script>
        var string = "";
        string = string + "<h3>Add &#60;Table&#62; Block</h3>";
        string = string + "<table>";
        for (index = 0; index <= 4; index++) {
            string = string + "<tr>";
            for (index2 = 0; index2 <= 3; index2++) {
                string = string + "<td onclick='myFunction(this)' width='20%'>Click Me!</td>"
            }
            string = string + "</tr>";
        }
        string = string + "</table>";
        document.body.innerHTML = string;
    </script>
</section>

function myFunction(e) {
  var colorstring = ["green", "lightgreen", "blue", "pink", "yellow", "purple", "brown", "red", "orange", "black"];
  var index = Math.floor((Math.random() * 9) + 1);
  e.innerHTML = colorstring[index];
  e.style.backgroundColor = colorstring[index];
}

var string = "";
string = string + "<h3>Add &#60;Table&#62; Block</h3>";
string = string + "<table>";
for (index = 0; index <= 4; index++) {
  string = string + "<tr>";
  for (index2 = 0; index2 <= 3; index2++) {
    string = string + "<td onclick='myFunction(this)' width='20%'>Click Me!</td>"
  }
  string = string + "</tr>";
}
string = string + "</table>";
document.body.innerHTML = string;

h3 {
  text-align: center;
}

table {
  margin: 0 auto;
  width: 50%;
}

table,
td {
  border: 1px solid;
  border-collapse: collapse;
}

table td {
  text-align: center;
  width: 25%;
  height: 1.5em;
}

<header>
  <img src="Fonts/Proj6_heading.png" />
</header>

<nav class="verticalNAV">
  <ul>
    <li><a href="Home_Page.html">Our Services</a></li>
    <li><a href="Growing_Pumpkins.html">Growing Pumpkins</a></li>
    <li><a href="Currency_Converter.html">Currency Converter</a></li>
    <li><a href="Add_Table_Block.html">Add Table Block</a></li>
  </ul>
</nav>

<section>
  <h2>&#60;Add Table Block&#62;</h2>
</section>

Answer 1

When you use document.body.innerHTML = string;, it doesn't add to document.body. It kind of deletes the current HTML of the body and sets it to string. Instead, use += document.body.innerHTML += string;, which adds to the body. Or, use document.body.appendChild(string);

function myFunction(e) {
  var colorstring = ["green", "lightgreen", "blue", "pink", "yellow", "purple", "brown", "red", "orange", "black"];
  var index = Math.floor((Math.random() * 9) + 1);
  e.innerHTML = colorstring[index];
  e.style.backgroundColor = colorstring[index];
}

var string = "";
string = string + "<h3>Add &#60;Table&#62; Block</h3>";
string = string + "<table>";
for (index = 0; index <= 4; index++) {
  string = string + "<tr>";
  for (index2 = 0; index2 <= 3; index2++) {
    string = string + "<td onclick='myFunction(this)' width='20%'>Click Me!</td>"
  }
  string = string + "</tr>";
}
string = string + "</table>";
document.body.innerHTML += string;

h3 {
  text-align: center;
}

table {
  margin: 0 auto;
  width: 50%;
}

table,
td {
  border: 1px solid;
  border-collapse: collapse;
}

table td {
  text-align: center;
  width: 25%;
  height: 1.5em;
}

<header>
  <img src="Fonts/Proj6_heading.png" />
</header>

<nav class="verticalNAV">
  <ul>
    <li><a href="Home_Page.html">Our Services</a></li>
    <li><a href="Growing_Pumpkins.html">Growing Pumpkins</a></li>
    <li><a href="Currency_Converter.html">Currency Converter</a></li>
    <li><a href="Add_Table_Block.html">Add Table Block</a></li>
  </ul>
</nav>

<section>
  <h2>&#60;Add Table Block&#62;</h2>

Answer 2

You're initializing string as an empty string, then adding the new elements to it. Then you're setting that as the innerHTML of the page. You need to initialize the string as the current page's innerHTML, then proceed.

function myFunction(e) {
  var colorstring = ["green", "lightgreen", "blue", "pink", "yellow", "purple", "brown", "red", "orange", "black"];
  var index = Math.floor((Math.random() * 9) + 1);
  e.innerHTML = colorstring[index];
  e.style.backgroundColor = colorstring[index];
}

var header = document.body

var string = `${header.innerHTML}`
string = string + "<h3>Add &#60;Table&#62; Block</h3>";
string = string + "<table>";
for (index = 0; index <= 4; index++) {
  string = string + "<tr>";
  for (index2 = 0; index2 <= 3; index2++) {
    string = string + "<td onclick='myFunction(this)' width='20%'>Click Me!</td>"
  }
  string = string + "</tr>";
}
string = string + "</table>";
document.body.innerHTML = string;

h3 {
  text-align: center;
}

table {
  margin: 0 auto;
  width: 50%;
}

table,
td {
  border: 1px solid;
  border-collapse: collapse;
}

table td {
  text-align: center;
  width: 25%;
  height: 1.5em;
}

<header>
  <img src="Fonts/Proj6_heading.png" />
</header>

<nav class="verticalNAV">
  <ul>
    <li><a href="Home_Page.html">Our Services</a></li>
    <li><a href="Growing_Pumpkins.html">Growing Pumpkins</a></li>
    <li><a href="Currency_Converter.html">Currency Converter</a></li>
    <li><a href="Add_Table_Block.html">Add Table Block</a></li>
  </ul>
</nav>



<section>
  <h2>&#60;Add Table Block&#62;</h2>
</section>

You should also consider consolidating your JavaScript together rather than in separate script tags as that's not very efficient practice.

Answer 3

You are overwriting on the whole page when you say:

document.body.innerHTML = string;

So replace it by the below line to write on the section part alone:

document.querySelector('section').innerHTML = string;