Question

我正在一个网页上，其中head和section元素中的脚本都用于输出表格，单击该表格时表格中的单元格将变为随机颜色。问题是页面加载时没有显示标头和nav元素，但是表却显示了这些内容，并且脚本运行正常。

由于我在正文部分使用了嵌套循环，因此我在此站点附近进行了检查以找到解决方案，但没有发现任何可以帮助我的内容。我还尝试在连接到字符串变量的表元素周围移动，但这也不起作用。最后（如果有帮助的话），我在外部样式表（未显示）中将nav元素浮动到左侧，并将section元素也浮动到左侧。

在head元素中（包括嵌入式CSS）：

private fun prepareRecyclerView(blogList: List<Blog>) {

    mBlogAdapter = BlogAdapter(blogList)
    if (this.resources.configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
        blogRecyclerView.layoutManager = LinearLayoutManager(this)
    } else {
        blogRecyclerView.layoutManager = GridLayoutManager(this, 4)
    }
    blogRecyclerView.itemAnimator = DefaultItemAnimator()
    blogRecyclerView.adapter = mBlogAdapter
    mBlogAdapter.notifyDataSetChanged()

}

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

在标题，导航和节元素中（全部来自body元素）：

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

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;

JavaScript代码导致<header>和<nav>元素不在浏览器中显示

3 个答案: