JS统计radio单选按钮值时报错forEach is not a function如何解决

错误原因 #

• document.getElementsByClassName 返回的是HTMLCollection类数组结构，没有内置forEach遍历方法，是触发你报错的直接原因。
• 你查询选中单选框的语法错误，getElementsByClassName仅支持传入类名字符串，不能使用:checked这类选择器语法。

修复后可运行代码 #

document.addEventListener( 'DOMContentLoaded', event => {
  const text = document.getElementById('resultScore')
  // 使用querySelectorAll获取单选按钮，返回的NodeList支持forEach方法
  const radioElems = document.querySelectorAll('.radio')
  radioElems.forEach((radioElem) => { 
    radioElem.addEventListener('change', count)
  })

  const count = () => {
    let score = 0
    // 直接用选择器匹配所有选中的单选按钮
    document.querySelectorAll('.radio:checked').forEach(radioChecked => {
      score += parseInt(radioChecked.value, 10)
    })
    text.innerText = score
  }
})

可选兼容写法 #

如果你坚持使用getElementsByClassName，可以手动把类数组转为真实数组再调用forEach：

const radioElems = Array.from(document.getElementsByClassName('radio'))
// 或者用扩展运算符
const radioElems = [...document.getElementsByClassName('radio')]

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