Innerhtml并未在JavaScript中刷新窗口

Question

我试图将innerhtml与数组一起使用，并且不起作用，但是，如果我使用文档。编写我的功能正常工作，我会得到以下内容：产品1价格1产品2价格2产品3价格3产品4价格4产品5价格5任何帮助将不胜感激。以下是代码：

var items = [
  ["product 1", "price 1"],
  ["product 2", "price 2"],
  ["product 3", "price 3"],
  ["product 4", "price 4"],
  ["product 5", "price 5"]
];
function testButton() {
  var j = 0;
  for (var i = 0; i < items.length; i++) {
    for (var j = 0; j < 2; j++) {
      document.getElementById("buttons").innerHTML = items[i][j] + "<br>";
      /*document.write(items[i][j] + "<br>");*/
    }
  }
}

#buttons {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
  font-size: 2em;
  border: solid;
}

<button id="buttons" onclick="testButton()">Next</button>

Answer 1

您可以在循环中构建HTML并将其附加到变量。然后在循环结束后，为按钮元素设置HTML。

var items = [
  ["product 1", "price 1"],
  ["product 2", "price 2"],
  ["product 3", "price 3"],
  ["product 4", "price 4"],
  ["product 5", "price 5"]
];
function testButton() {
  var html = '';
  var j = 0;
  for (var i = 0; i < items.length; i++) {
    for (var j = 0; j < 2; j++) {
      html += items[i][j] + "<br>";
      /*document.write(items[i][j] + "<br>");*/
    }
  }
  document.getElementById("buttons").innerHTML = html;
}

#buttons {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
  font-size: 2em;
  border: solid;
}

<button id="buttons" onclick="testButton()">Next</button>

Answer 2

您编写的代码替换了for循环的每个迭代中的按钮的内容。

document.getElementById("buttons").innerHTML = items[i][j] + "<br>";

i think 您想附加内容，我敢肯定是连续呼叫document.write做的。

document.getElementById("buttons").innerHTML += items[i][j] + "<br>";

根据您的要求，您可能需要在开始循环之前清除此问题。