求助：使用JavaScript更新多个文本片段实例失败的解决办法

你的核心问题是HTML里重复使用了同一个ID——ID在HTML规范里必须是唯一的，document.getElementById()只会返回第一个匹配到的元素，所以只有第一个标签里的名字能更新。

解决步骤很简单：

• 把所有要更新的span标签的id="initname"改成class="initname"，同时去掉原代码里span标签上多余的分号（原代码里<span id="initname";>的分号是语法错误）
• 修改changeText函数，获取所有带initname类的元素，循环更新每个元素的内容

修改后的完整代码如下：

完整可运行代码 #

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font-family: Arial;
      width: 75%;
      margin-right: auto;
      margin-left: auto;
    }

    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 15px 15px;
      transition: 0.2s;
      font-size: 18px;
    }

    .tab button:hover {
      background-color: #ddd;
    }

    .tab button.active {
      background-color: #ccc;
    }

    .tabcontent {
      display: none;
      padding: 5px 5px;
      border: 1px solid #ccc;
      border-top: none;
    }
  </style>
</head>

<body>

  <h2>Test thing</h2>
  <p>
    <form method="post">
      <input type="text" onkeyup="changeText(this)" name="first name" placeholder="Enter Your Name" required="required" class="input-txt" />
    </form>
  </p>
  <p>tabs of sentences</p>

  <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'Tab 1')">Tab 1</button>
    <button class="tablinks" onclick="openTab(event, 'Tab 2')">Tab 2</button>
    <button class="tablinks" onclick="openTab(event, 'Tab 3')">Tab 3</button>
  </div>

  <div id="Tab 1" class="tabcontent">
    <p>Hello, my name is <b><span class="initname">First and Last</span></b> number 1 and I really wish all instances of my name would update when I type in the above text field.</p>
  </div>

  <div id="Tab 2" class="tabcontent">
    <p>Hello, my name is <b><span class="initname">First and Last</span></b> number 2 and I really wish all instances of my name would update when I type in the above text field.</p>
  </div>

  <div id="Tab 3" class="tabcontent">
    <p>Hello, my name is <b><span class="initname">First and Last</span></b> number 3 and I really wish all instances of my name would update when I type in the above text field.</p>
  </div>

  <script>
    function openTab(evt, tabName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(tabName).style.display = "block";
      evt.currentTarget.className += " active";
    }

    // 优化后的更新函数，遍历所有目标元素
    function changeText(element) {
      document.querySelectorAll('.initname').forEach(el => {
        el.textContent = element.value;
      });
    }
  </script>
</body>

</html>

额外说明 #

querySelectorAll('.initname')是更现代的元素选择方式，返回的是一个节点列表，可以用forEach直接遍历；如果习惯旧写法，也可以用document.getElementsByClassName('initname')，然后用for循环遍历更新，效果完全一致。

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