使用document.querySelectorAll获取按钮值返回undefined的问题排查

我的HTML代码： #

<div class="buttons-div">
<button class="modulo-button" id="btn" value="%">%</button>
<button class="division" id="btn" value="/">/</button>
<button class="seven" id="btn" value="7">7</button>
<button class="eight" id="btn" value="8">8</button>
<button class="nine" id="btn" value="9">9</button>
<button class="multiplication" id="btn" value="*">*</button>
<button class="four" id="btn" value="4">4</button>
<button class="five" id="btn" value="5">5</button>
<button class="six" id="btn" value="6">6</button>
</div>

我的JavaScript代码： #

const allButtons = document.querySelectorAll("#btn");
console.log(allButtons.value);

问题原因： #

1. HTML id重复违规：HTML规范明确要求id是页面内唯一标识，不能给多个元素设置相同的id="btn"。这种错误写法会导致选择器行为异常，即便querySelectorAll('#btn')能返回元素集合，也属于不符合规范的用法。
2. NodeList无value属性：document.querySelectorAll()返回的是NodeList类数组对象，这个集合本身没有value属性，直接调用allButtons.value必然返回undefined。要获取按钮值，必须遍历集合内的单个元素。

解决步骤： #

1. 修正HTML的id重复问题：将所有按钮的id="btn"改为class="btn"（class允许重复使用）：

<div class="buttons-div">
<button class="modulo-button btn" value="%">%</button>
<button class="division btn" value="/">/</button>
<button class="seven btn" value="7">7</button>
<button class="eight btn" value="8">8</button>
<button class="nine btn" value="9">9</button>
<button class="multiplication btn" value="*">*</button>
<button class="four btn" value="4">4</button>
<button class="five btn" value="5">5</button>
<button class="six btn" value="6">6</button>
</div>

2. 修正JavaScript代码：使用class选择器.btn获取按钮集合，再遍历获取每个按钮的value：

const allButtons = document.querySelectorAll(".btn");
// 逐个打印按钮value
allButtons.forEach(button => {
  console.log(button.value);
});

// 若需将所有value存入数组：
const buttonValues = Array.from(allButtons).map(button => button.value);
console.log(buttonValues); // 输出 ["%", "/", "7", "8", "9", "*", "4", "5", "6"]

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