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

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

当前，它仅输出到第一个字段。

这是输入：

  <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

最佳答案

ID必须是唯一的。使用类和for循环来循环遍历每个类并进行更改。 document.getElementById不能完成此操作。有关document.getElementById的一些基本信息，请参见https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById。 document.getElementsByClassName返回一个数组，该数组填充有具有特定类的现有元素。在这种情况下，objectDisplay。如果您想了解更多信息，请在这里查看：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName。


新代码应如下所示：

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

.container {
  padding: 10px;
}

.text-strong {
  font-weight: bold;
}

.inline {
  display: inline;
}

.borderless-input {
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  padding: .5rem .75rem;
  text-align: center;
}

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <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>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h3><strong>Output</strong></h3>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <p>The quick sly fox jumped over the <span class="objectDisplay inline"></span>.</p>
      <p>The quick sly fox jumped over the <span class="objectDisplay inline"></span>.</p>
      <p>The quick sly fox jumped over the <span class="objectDisplay inline"></span>.</p>
    </div>
  </div>
</div>


<!-- For Testing Only -->
<div class="container">
  <div class="row">
    <div class="col-lg-10 offset-lg-1 mx-auto">
      <!-- Test Here -->

    </div>
  </div>
</div>

关于javascript - Javascript-输入文字并输出到多个区域，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47542670/