javascript - 使用 Javascript 替换为 getElementsByClassName 不起作用

Question

我posted a question几天前，效果很好，我感谢那些提供帮助的人，但由于我无法控制的原因，我必须按照我原来的帖子使用类(class)而不是 id。

基本上我想做的是从字符串中删除单词“Other”(内容是通过表单动态添加的)。

这是我尝试使用的代码:

var str = document.getElementsByClassName('gv-field-4-custom').innerHTML;
var text = str.replace("Other", " ");
document.getElementsByClassName('gv-field-4-custom').innerHTML = text;

.gv-field-4-custom {
  color: #ff0000;
}

<table>
  <tr>
    <td class="gv-field-4-custom">Complex interventions, Evidence Synthesis (randomised trials), Studies within a Trial (SWAT), Trial Conduct, Trial Design, Other Core Outcome Sets (COS)</td>
  </tr>
</table>

关于我做错了什么有什么建议吗？

Answer 1

您的问题是，getElementsByClassName 返回一组元素，在本例中仅包含一个元素。如果您只有一个具有此 className 的元素，或者只想更改一个元素，您可以这样做:

var element = document.getElementsByClassName('gv-field-4-custom')[0];
var str = element.innerHTML;
var text = str.replace("Other", " ");
element.innerHTML = text;

.gv-field-4-custom {
  color: #ff0000;
}

<table>
  <tr>
    <td class="gv-field-4-custom">Complex interventions, Evidence Synthesis (randomised trials), Studies within a Trial (SWAT), Trial Conduct, Trial Design, Other Core Outcome Sets (COS)</td>
  </tr>
</table>

如果您有更多元素需要处理，请像这样:

var elements = document.getElementsByClassName('gv-field-4-custom');

for (var i = 0; i < elements.length; i++) {
  var str = elements[i].innerHTML;
  var text = str.replace("Other", " ");
  elements[i].innerHTML = text;
}

.gv-field-4-custom {
  color: #ff0000;
}

<table>
  <tr>
    <td class="gv-field-4-custom">Complex interventions, Evidence Synthesis (randomised trials), Studies within a Trial (SWAT), Trial Conduct, Trial Design, Other Core Outcome Sets (COS)</td>
  </tr>
</table>