通过JavaScript按类清除HTML文本内容的实现问题

你的问题核心是对getElementsByClassName()的返回值理解有误——它返回的是所有匹配该类名的元素组成的HTMLCollection类数组对象，不是单个DOM元素，所以直接给这个集合赋值.value = ""是不会生效的。而ID选择器getElementById()返回的是单个元素，所以直接赋值能正常工作。

要实现批量清除多个类名匹配的输入框内容，你只需要遍历这个集合，逐个清空每个元素的value即可。修改后的eraseText()函数可以这样写：

function eraseText() {
  // 获取所有需要清空的元素集合
  const targetElements = document.getElementsByClassName("eraseonupdate");
  // 遍历集合，逐个清空内容
  for (let i = 0; i < targetElements.length; i++) {
    targetElements[i].value = "";
  }
}

如果你习惯用更现代的数组方法，也可以把HTMLCollection转换成数组后用forEach遍历：

function eraseText() {
  Array.from(document.getElementsByClassName("eraseonupdate")).forEach(element => {
    element.value = "";
  });
}

这样修改后，当你点击“Yes”单选框时，所有带有eraseonupdate类的输入框都会被清空，完全满足你作用于10个以上字段的需求。你的HTML触发部分的代码不需要改动，onclick="ExceptionUpdate();eraseText()"的调用顺序也是合理的。

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