Javascript更改所有跨度元素的innerHTML [重复]答案

【问题标题】：Javascript change innerHTML of all span elements [duplicate]Javascript更改所有跨度元素的innerHTML [重复]
【发布时间】：2015-12-18 15:43:01
【问题描述】：

预期行为：按下按钮时，每个跨度中包含的文本将变为“已更新”

实际行为：按下按钮时，似乎没有任何变化。

JSFiddle：https://jsfiddle.net/jrj0y5kd/

CSS

span {
  border: 1px solid black;
  padding: 5px;
}

td {
  padding: 10px;
}

div {
  padding: 10px;
  border: 2px solid black;
  display: inline-block;
  text-align: center;
}

HTML

<div style="container">
  <button value="UPDATE" onClick="update()">UPDATE</button>
  <table>
    <tr>
      <td>
        <span>1A</span>
      </td>
      <td>
        <span>1B</span>
      </td>
      <td>
        <span>1C</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>2A</span>
      </td>
      <td>
        <span>2B</span>
      </td>
      <td>
        <span>2C</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>3A</span>
      </td>
      <td>
        <span>3B</span>
      </td>
      <td>
        <span>3C</span>
      </td>
    </tr>
  </table>
</div>

Javascript

function update() {
  var spans = document.getElementsByTagName('span');
  for (var i = 0; i < spans.length; i++) {
    spans[i].innerHTML = "UPDATED!";
  };
}

【问题讨论】：

您也可以将函数添加到window 对象。这保证了它是全局范围的一部分，即使它是在另一个函数中定义的。
我没有考虑到 JSFiddle 设置是问题的情况。谢谢你的重定向:)

标签： javascript for-loop

【解决方案1】：

您必须全局定义函数。在 jsFiddle 中，您可以使用 JavaScript 块右上角的小设置图标指定此行为。看到这个更新的小提琴：https://jsfiddle.net/jrj0y5kd/2/

<html>
    <head>
       <script>
          function update(){
              // your code
          }
       </script>
     </head>
<body>
    <button value="UPDATE" onclick="update()">UPDATE</button>
</body>
</html>

'load type'下的选项需要设置为：no wrap - in head

【讨论】：

啊，没注意……你说得对
@Teemu，也可以定义为in the element object。
@MinusFour 是的，但这有点离题了吧？而且我认为这很丑:)
@MinusFour 你是对的，尽管将自定义属性设置为 HTML 元素被认为是不好的做法......嗯，通常内联处理程序也是如此； )。
要解决范围问题，您还可以使用 addEventListener() 而不是 onClick 属性来更改函数绑定到 onClick 处理程序的方式。见jsfiddle.net/jrj0y5kd/9

【解决方案2】：

未定义更新。我认为你将函数定义为迟到或什么的

<script>
function update() {
  var spans = document.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
      spans[i].innerHTML = "UPDATED!";
    };
}
</script>

<div style="container">
<button value="UPDATE" onclick="update()">UPDATE</button>
<table><tr><td>
<span>1A</span>
</td><td>
<span>1B</span>
</td><td>
<span>1C</span>
</td></tr><tr><td>
<span>2A</span>
</td><td>
<span>2B</span>
</td><td>
<span>2C</span>
</td></tr><tr><td>
<span>3A</span>
</td><td>
<span>3B</span>
</td><td>
<span>3C</span>
</td></tr></table></div>

有效

【讨论】：