时间戳

首页 > 解决方案 > JavaScript 代码原因

和

javascript - JavaScript 代码原因
和

问题描述

我正在开发一个网页，其中 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、nav 和 section 元素中（全部来自 body 元素）：

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

标签： javascripthtmlcss

解决方案

使用时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>

推荐阅读