javascript - 键入输入时更改 Div 的内容

Question

我需要在键入输入时更改多个 DIV 的内容。

我已经能够更改第一个 div，尝试使用一些循环并浏览不同的其他问题，但没有成功。

let input = document.getElementById('in');
let out = document.getElementById('out');

input.onkeyup = function() {
  out.innerHTML = input.value;
}

<input type="text" id="in">
<div id="out"></div>

我应该显示从输入 #in 到几个 div #out 的值(它们将是类)。Whitout 使用 JQuery。

Answer 1

您可以使用 document.getElementsByClassName("out"); 执行此操作，然后使用 for 循环更改所有不同的元素。
在 for 循环中，您可以通过 elems.item(index) 访问元素。

请看下面的片段:

let input = document.getElementById('in');
let outs = document.getElementsByClassName("out");

input.onkeyup = function() {
  for(var i = 0; i < outs.length; i++){
      outs.item(i).innerHTML = input.value;
  }
}

<input type="text" id="in">
<div class="out"></div>
<div class="out"></div>