Javascript更改所有span元素的innerHTML

Javascript change innerHTML of all span elements

本文关键字：元素 innerHTML span Javascript      更新时间：2023-09-26

预期行为：按下按钮时，每个跨度中包含的文本将变为"UPDATED"

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

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!";
  };
}

您必须全局定义函数。在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>

"加载类型"下的选项需要设置为：无换行头

未定义更新。我想你把函数定义为延迟或其他

<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>

这适用于

相关文章：