javascript - 更改值未显示

Question

我已经创建了一个文本字段来更改一个值，这在某一方面似乎工作正常。

Voornaam: <h3 id="title1">Test</h3>
      <input type="text" id="myTextField1"/>
      <input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>

这链接到这个 javascript 函数:

function change1(){
   var myNewTitle = document.getElementById('myTextField1').value;
   if( myNewTitle.length==0 ){
       alert('Write Some real Text please.');
   return;
   }
   var title = document.getElementById('title1');
   title.innerHTML = myNewTitle;
}

这没有任何问题并显示了我更改后的值，但是当我想在我的 html 代码中较低的地方显示相同的值时，它不会显示更改后的值。

下面是更改后的值没有显示的部分代码:

  <section class="bg-green">
         <div class="block left wide">
            <article>
               <h1>testfile<br/><span contenteditable="true" data-id="school-name"><?php echo $schoolName; ?></span></h1>
               <br/>
               <p>
                  <strong>Geachte <span data-id="name"><?php echo $salutation; ?> <?php echo $lastName; ?></span></strong>,
                  <p id="title1">Test.</p>
               </p>

应该出现的部分是

<p id="title1">Test.</p>

谁能指出我正确的方向？

Answer 1

您似乎不止一次使用了 ID“title1”。 document.getElementById 只会找到一个(第一个，如果我没记错的话)。

使用类并迭代 getElementByClassName 找到的元素

   var titles = document.getElementsByClassName('title1');
   Array.prototype.forEach.call(titles,title => {
    title.innerHTML = myNewTitle;
   });

这是一个有效的 jsfiddle我的解决方案。