求助：设置按钮innerHTML后内容不显示，页面按钮仍为空

核心问题分析 #

• jQuery对象与原生DOM元素混淆：你用$(#btn${l})获取的是jQuery包装后的对象，不是原生DOM元素，所以.innerHTML这个原生属性对它不起作用。
• 冗余循环无意义：外层的for(let i = 0; i < 2; i++)重复执行两次填充数组和设置文本的操作，完全没必要，只会浪费资源。

修复方案 #

有两种常见修复方式：

方式1：使用jQuery的方法设置文本

直接用jQuery提供的.text()或.html()方法来设置内容，这是jQuery操作元素的标准方式：

let buttons = [];

// 填充按钮数组
for(let l = 0; l < 4; l++) {
    buttons[l] = $(`#btn${l}`);
} 

// 设置按钮文本
for(let s = 0; s < buttons.length; s++) {
    buttons[s].text("Info"); // 用jQuery的text方法
    // 或者用html()：buttons[s].html("Info");
}

方式2：提取原生DOM元素再用innerHTML

如果坚持要用原生的innerHTML，可以从jQuery对象中取出原生DOM元素（通过索引[0]或.get(0)）：

let buttons = [];

for(let l = 0; l < 4; l++) {
    buttons[l] = $(`#btn${l}`)[0]; // 取出原生DOM元素存到数组
} 

for(let s = 0; s < buttons.length; s++) {
    buttons[s].innerHTML = "Info"; // 现在可以正常使用innerHTML
}

更简洁的写法（无需数组） #

其实完全不需要用数组存储，直接批量选择所有按钮并设置内容，代码更简洁：

// 直接选择所有id以btn开头的按钮，批量设置文本
$("[id^='btn']").text("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>
<div class="main-container">
    <h1 class="header" id="header">Quiz Game</h1>
    <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>
// 简洁版写法
$("[id^='btn']").text("Info");

// 或者用数组的方式（二选一即可）
// let buttons = [];
// for(let l = 0; l < 4; l++) {
//     buttons[l] = $(`#btn${l}`);
// } 
// for(let s = 0; s < buttons.length; s++) {
//     buttons[s].text("Info");
// }
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user20907202