Question

我正在尝试将innerHTML与数组一起使用，但它不起作用，但如果我使用document.write我的功能正常，我得到以下内容：产品1 价格1 产品2 价格2 产品3 价格3 产品4 价格4 产品5 价格5 任何帮助将不胜感激。以下是代码：

＆＃13;

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>");*/
    }

  }

}

＆＃13;

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

＆＃13;

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

＆＃13;

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>

innerHTML没有在javascript中刷新窗口

1 个答案: