所以我有一个问题与innerHTML。我有一个空数组按钮，我填充使用for循环。然后使用另一个for循环，我将每个按钮的innerHTML设置为"Info"但是当我检查我的网站时，按钮是空的。
//Array
let buttons = [];
//Questions for loop
for(let i = 0; i < 2; i++)
{
//Loop that populates Buttons array
for(let l = 0; l < 4; l++)
{
buttons[l] = $(`#btn${l}`);
}
//for loop that sets button's inner
//HTML's
for(let s = 0; s < buttons.length; s++)
{
buttons[s].innerHTML = "Info";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Game</title>
</head>
<body>
<!-- Main Container -->
<div class="main-container">
<!-- Header -->
<h1 class="header" id="header">Quiz Game</h1>
<!-- Buttons -->
<button id="btn0"></button>
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
</div>
<script src="/library/jquery-3.6.3.min.js"></script>
<script src="test1.js"></script>
</body>
</html>
使用jQuery，您应该调用buttons[s].html("Info");来设置innerHTML。但是，buttons[s].text("Info");在这里更好，因为字符串中实际上没有任何HTML标记。
你也可以用一个选择器选择id以"btn"开头的所有按钮，然后一次设置所有的文本。
const buttons = $('[id^=btn]');
buttons.text('Info');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn0"></button>
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>实际上，我测试了你的代码，它工作得很好。我看到你调用，我猜你的JavaScript正在这个文件中运行。
可能问题是这个文件中有一个异常阻止执行到达"innerHTML"命令。
你能把你的"test1.js"内容或任何控制台日志?
//Array
let buttons = [];
//Questions for loop
for (let i = 0; i < 2; i++) {
//Loop that populates Buttons array
for (let l = 0; l < 4; l++) {
//Replaced JQuery with Vanilla
buttons[l] = document.getElementById("btn" + l);
}
//for loop that sets button's inner
//HTML's
for (let s = 0; s < buttons.length; s++) {
buttons[s].innerHTML = "Info";
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Game</title>
</head>
<body>
<!-- Main Container -->
<div class="main-container">
<!-- Header -->
<h1 class="header" id="header">Quiz Game</h1>
<!-- Buttons -->
<button id="btn0"></button>
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
</div>
</body>
</html>