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

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

Answer 1

ID 必须是唯一的。使用类和 for 循环循环遍历每个类并更改它。

这不能通过 document.getElementById 来完成。请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById有关 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>