我正在尝试将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>");*/
}
}
}
&#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;
答案 0 :(得分:2)
您可以在循环中构建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>