変更された値が表示されない

Question

値を変更するためにテキストフィールドを作成しましたが、これは1つの部分でうまくいくようです。

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」を複数回使用しているようです：あなたは1つのID回以上

ソリューションを使用する場合 また、無効なHTMLです。 document.getElementByIdは1つだけを見つけます（私が間違っていなければ最初のものです）。

クラスを使用し、ここでgetElementByClassName

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

で見つかった要素を反復処理するには、私の解決策の作業jsfiddleです。

Answer 2

あなたはID = H3タグの最初の使用に表示されます、同じIDを持つ2つのDOM要素= TITLE1

<h3 id="title1">Test</h3> 

と

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

入力したテキストを持っています。

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

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

<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="change1result">Test.</p> 
      </p>