使用 javascript 在 html 中将 class 替换为空字符串

Question

我正在尝试创建一个 js 函数，该函数从 HTML 中的某个 class 字段中删除文本 onclick。

在触发器 (onclick) 中勾选 Yes 时，该函数不会清除我的目标中的数据。

如果我在适当的地方用 id 替换 class，这会起作用，但我需要该函数来影响 10+ 个 html 字段。这可以通过 class 来完成吗？

注意：下面的HTML有点多余，因为我的trigger中还有一个js函数运行onclick。我已经删除了 div，所以它不那么混乱了。

JavaScript

function eraseText() {
  document.getElementsByClassName("eraseonupdate").value = "";
}

HTML

触发器：

<input type="radio" name="exceptionupdate" class="_exceptionupdate" value="Yes" onclick="ExceptionUpdate();eraseText()" />Yes <input type="radio" name="exceptionupdate" class="_exceptionupdate" value="No" onclick="ExceptionUpdate()" />No

目标：

<input type="text" name="Approver" size="20" class="eraseonupdate">

Answer 1

那是因为两种方法return的值不同。

getElementById 将 return 一个 HTML 对象（因为 id 应该是唯一的）。
getElementsByClassName 将 return 一个 HTML 集合（因为类不需要是唯一的）。要更改此集合中每个项目的值，您需要遍历它们。

例如

var elements = document.getElementsByClassName("eraseonupdate");

for (var i = 0; i < elements.length; i++) {
    elements[i].value = ""
}

Answer 2

您需要迭代 .getElementsByClassName() 的结果，为了更容易，您可以将其转换为数组，如下所示：

function eraseText() {
  var elements = document.getElementsByClassName('eraseonupdate');
  
  Array.prototype.slice.call(elements).forEach(function(el) {
    el.value = '';
  });
  
  // if you do not need old browsers to work you could do
  /*
  [...elements].forEach(el => {
    el.value = '';
  });
  */
}

function ExceptionUpdate() {
  return;
}

<input type="text" name="Approver" size="20" class="eraseonupdate">

<label><input type="radio" name="exceptionupdate" class="_exceptionupdate" value="Yes" onclick="ExceptionUpdate();eraseText()" />Yes</label>

<label><input type="radio" name="exceptionupdate" class="_exceptionupdate" value="No" onclick="ExceptionUpdate()" />No</label>

Answer 3

调用getElementsByClassName("class")returns元素集合。迭代它们并在循环中清除值。根据您的需要使用 value 或其他属性或 innerHTML：

function clearText() {
    var elements = document.getElementsByClassName("abc");
    [...elements].forEach(element => {
        element.value = "";
        // element.innerHTML="";
    });
}

您可以使用 Array.from(elements).forEach() 代替 [...elements].forEach()。

使用 javascript 在 html 中将 class 替换为空字符串

Replace text with empty string by class in html using javascript

html

javascript

getelementsbyclassname