javascript - innerHTML 不刷新 javascript 中的窗口

Question

我尝试将innerHTML与数组一起使用，但它不起作用， 但如果我使用 document.write 我的功能正常工作，我得到以下信息: 产品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>