The use of JavaScript within the code results in the <header> and <nav> elements failing to display on the browser

Question

The use of JavaScript within the code results in the <header> and <nav> elements failing to display on the browser

Currently, I am tackling a webpage project that involves using scripts in both the head and section elements to generate a table where clicking on the cells changes their color randomly. However, a glitch seems to be hindering the display of the header and navigation elements upon page load, even though the table and scripts are functioning correctly.

My approach includes utilizing a nested loop in the body section, but I have scoured this platform for potential solutions without success. I also experimented with rearranging the table elements concatenated to a string variable, but that did not resolve the issue either. As a last resort, I adjusted the float property for the nav and section elements in my external stylesheet (not provided).

Within 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>

Include the header, nav, and section elements (all within 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>

javascript html css

Answer 1

Answer №1

When utilizing the code

document.body.innerHTML = string;

, it essentially replaces the existing content of document.body with the new string content. To add to the existing content instead, you should use += like this:

document.body.innerHTML += string;

. Alternatively, you can use

document.body.appendChild(string);

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

var string = "";
string += "<h3>Add &#60;Table&#62; Block</h3>";
string += "<table>";
for (index = 0; index <= 4; index++) {
  string += "<tr>";
  for (index2 = 0; index2 <= 3; index2++) {
    string += "<td onclick='addColor(this)' width='20%'>Click Me!</td>"
  }
  string += "</tr>";
}
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

When utilizing the code

document.body.innerHTML = string;

, it essentially replaces the existing content of document.body with the new string content. To add to the existing content instead, you should use += like this:

document.body.innerHTML += string;

. Alternatively, you can use

document.body.appendChild(string);

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

var string = "";
string += "<h3>Add &#60;Table&#62; Block</h3>";
string += "<table>";
for (index = 0; index <= 4; index++) {
  string += "<tr>";
  for (index2 = 0; index2 <= 3; index2++) {
    string += "<td onclick='addColor(this)' width='20%'>Click Me!</td>"
  }
  string += "</tr>";
}
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 3

Answer №2

The initial step involves declaring an empty string called string and then appending new elements to it. Subsequently, this modified string is assigned as the innerHTML of the current page. A more effective approach would be to set the string as the existing page's innerHTML before continuing.

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

var header = document.body;

var string = `${header.innerHTML}`;
string = string + "<h3>Insert &#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='generateContent(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>

In addition, it is advisable to consolidate your JavaScript code into one coherent block instead of having it spread across multiple script tags as this can enhance efficiency.

Answer 4

The initial step involves declaring an empty string called string and then appending new elements to it. Subsequently, this modified string is assigned as the innerHTML of the current page. A more effective approach would be to set the string as the existing page's innerHTML before continuing.

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

var header = document.body;

var string = `${header.innerHTML}`;
string = string + "<h3>Insert &#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='generateContent(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>

In addition, it is advisable to consolidate your JavaScript code into one coherent block instead of having it spread across multiple script tags as this can enhance efficiency.

Answer 5

Answer №3

When you want to write only on a specific section of the page, avoid overwriting the entire page with this line of code:

document.body.innerHTML = string;

Instead, use the following line to ensure you are writing only to the section element:

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

Answer 6

When you want to write only on a specific section of the page, avoid overwriting the entire page with this line of code:

document.body.innerHTML = string;

Instead, use the following line to ensure you are writing only to the section element:

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

The use of JavaScript within the code results in the <header> and <nav> elements failing to display on the browser

Answer №1

Answer №2

Answer №3

Similar questions

Styling tables within HTML emails for Gmail and then utilizing PHPMailer to send the emails

ReactJS components enhanced with bootstrap-table JS extension

Stop the bootstrap navbar from resizing

The functionality of CSS isn't up to snuff on Mozilla Firefox

In an AngularJS custom filter function, the error message "keys is not defined" is displayed

The dynamic loading of videos through the YouTube API

Find the value of a JavaScript string variable using an alternative name

Locate the checkbox label using CSS

Extracting the URL of the @font-face declaration in CSS with the use of JavaScript

ACE.js enhances website security through Content Security Policy

Clicking on an element in React Material UI Autocomplete will bring it

Refreshing the webpage section without requiring a full page reload

Is it possible to enable autocomplete for JavaScript generated code in .proto files?

What steps should be taken to incorporate that dynamic sliding element (like a sliding screen paper) on the webpage?

Guide to tallying the occurrences of a specific key within an object array and attaching the count to each key's current value

Ways to display map results in multiple columns utilizing react

Is it possible to asynchronously access a JSON object that has been retrieved from a local file on a global scale using the XMLHttpRequest method and

Having trouble displaying API values in b-form-select component in Vue.js?

What is the process for generating an Electronic Program Guide for television?

"What is the best way to retrieve the name of the object passed in a function in