在键入输入时更改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（它们将是类）的值。使用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>

Answer 2

您到目前为止尝试了什么？我立即看到的问题只是您要获取单个元素而不是多个元素。

<script>
    let input = document.getElementById('in');
    let out = document.getElementsByClassName('out');

    input.onkeyup = function () {
        for each (let item in out) {
            //loops through each element with the class 'out' and sets the innerHTML to the input's value
            item.innerHTML = input.value;
        }
    }
</script>

Answer 3

使用out类使div并使用document.querySelectorAll通过查询选择器获取所有元素

const input = document.getElementById('in');
const divs = document.querySelectorAll('.out');

input.onkeyup = function() {
  divs.forEach(function(div) {
    div.innerHTML = input.value;
  });
}

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

Answer 4

感谢大家的帮助，无论如何我还是今天早晨找到了解决方案：

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

    let input = document.getElementById('sentence');
    let divs = document.querySelectorAll('div);

    input.addEventListener('keyup', function(){
          for(let i=0; i < divs.length; i++){
              divs[i].innerHTML = input.value;
          }
    })

检查其他答案，我想知道它们之间的区别：

divs.forEach(function(div){ ... })

for each (let item in out) { ... }

for(var i = 0; i < outs.length; i++){ ... }