JavaScript待办列表开发中按钮无法正常触发绑定函数问题

按钮绑定的函数无法正常执行，核心是DOM选择器使用错误：getElementsByClassName 返回的是匹配对应类名的所有元素组成的类数组集合，不是单个DOM元素，直接在集合上读取value、设置innerHTML拿到的都是undefined，根本操作不到目标节点。

只需要在获取类数组集合后，取索引为0的第一个匹配元素操作即可，修正后的JS逻辑如下：

function displayEntry() {
  // 获取第一个class为entrybox的输入框的值
  const inputVal = document.getElementsByClassName("entrybox")[0].value;
  // 获取第一个class为display的段落，写入输入内容
  document.getElementsByClassName("display")[0].textContent = inputVal;
}

原有HTML结构不需要调整，替换JS代码后点击按钮即可正常把输入框内容渲染到对应展示区域：

<div class="six columns">
  <input class="entrybox" type="text" value="placeholder">
  <p class="display"></p>
  <button onclick="displayEntry()">Click Me</button>
  <input type="button" name="clear" value="clear list">
</div>

• 如果对应类名的元素在页面中唯一，更推荐用document.querySelector(".类名")直接获取单个匹配元素，不需要手动取集合索引，写法更简洁
• 渲染普通文本时优先用textContent代替innerHTML，可以避免XSS注入风险，性能也更好
• 后续给清空列表按钮绑定逻辑时，同样要注意先拿到对应DOM元素再执行清空操作

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