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

的DOM元素

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

输入的文字应该出现在ID = h3标签的第一次使用中。当您多次使用一个ID时，它也是无效的HTML

解决方案：

{{1}}

Answer 2

您似乎不止一次使用ID“title1”。 document.getElementById只能找到一个（第一个，如果我没弄错的话）。

使用类并迭代getElementByClassName

找到的元素

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

以下是我的解决方案的jsfiddle。

更改的值未显示

2 个答案: