JavaScript 代码的原因<header>和<nav>元素不在浏览器中显示

Question

我正在开发一个网页，其中head和section元素中的脚本都用于输出一个表，其中表中的单元格在单击时会变为随机颜色。问题是，当加载页面时，页眉和导航元素没有显示，但表显示了，并且脚本运行良好。

由于我在正文部分使用了嵌套循环，我在这个网站上查看了解决方案，但没有发现任何对我有帮助的东西。我还试图移动连接到字符串变量的表元素，但这也不起作用。最后(如果这有帮助的话(，我在外部样式表(未显示(中将nav元素向左浮动，并将section元素向左浮动。

在head元素(包括嵌入式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>

在标题、导航和区段元素中(全部来自主体元素(：

<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

当您使用document.body.innerHTML = string;时，它不会添加到document.body。它会删除正文的当前HTML，并将其设置为string。相反，使用+=document.body.innerHTML += string;，这会添加到正文中。或者，使用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

将string初始化为空字符串，然后向其中添加新元素。然后将其设置为页面的innerHTML。您需要将字符串初始化为当前页面的innerHTML，然后继续。

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>

您还应该考虑将JavaScript合并在一起，而不是单独的script标记中，因为这不是非常有效的做法。

Answer 3

当你说：时，你覆盖了整个页面

document.body.innerHTML = string;

因此，将其替换为以下行，以便单独在section部分上写入：

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