Question

我正在尝试在字段中输入文本，并将其输出到多个字段。

目前，它只输出到第一个字段。

以下是输入：

  <form class="form" onchange="myFunction()">
      <div class="mb-4">
        <p>The quick sly fox jumped over the <input id="object" class="inline borderless-input"></p>
      </div>
  </form>

JS控制输出：

function myFunction()

  {
    //Object
    var x = document.getElementById("object");
    var div = document.getElementById("objectDisplay");
    div.innerHTML = x.value;    
  }

以下是我正在使用的codepen： Codepen

Answer 1

使用class而不是id

标识您的输入

 <p>The quick sly fox jumped over the <span id="objectDisplay" class="objectDisplay inline"></span>.</p>

使用此

var divs = document.getElementsByClassName("objectDisplay");
for(var i = 0; i < divs.length; i++){
 divs[i].innerHTML = x.value;     
}

而不是

var div = document.getElementById("objectDisplay");
div.innerHTML = x.value;

Answer 2

ID是唯一的，因此每页只能有一个ID。尝试将objectDisplay更改为一个类，然后将它们全部选中并循环遍历每个类

function myFunction(el)

  {
    //Object
    var x = document.getElementById("object");
    var divs = document.querySelectorAll(".objectDisplay");
    var inputValue = el.value;
    for(var i=0; i < divs.length; i++){
      divs[i].innerHTML = inputValue;
    }    
  }

  <form class="form">
      <div class="mb-4">
        <p>The quick sly fox jumped over the <input id="object" class="inline borderless-input" onchange="myFunction(this)" value=""></p>
      </div>
  </form>
  <div class="objectDisplay"></div>
  <div class="objectDisplay"></div>

Answer 3

我发现了一个类似的问题，请看链接：jQuery id selector works only for the first element。

但简单地说，您为多个元素使用相同的ID，请尝试使用类选择器，例如document.getElementsByClassName（＆＃39; your-class＆＃39;）或document.querySelectorAll（＆＃ 39;你的班级＆＃39;），记住在querySelectorAll中的类：＆＃39; .your-class＆＃39;和Id：＆＃39;＃my-id＆＃39;。

...some.csv, range: 20971520-24311915, partition values: [empty row]

Javascript - 输入文本并输出到多个区域

3 个答案: