Javascript 键入输入时更改Div的内容

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

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

let input=document.getElementById（'in'）；
let out=document.getElementById（'out'）；
input.onkeyup=函数（）{
out.innerHTML=input.value；
}

---

您可以使用

document.getElementsByClassName（“out”）然后使用for循环更改所有不同的元素。

在for循环中，您可以通过
elems.item（index）
访问元素

请参见下面的代码段：


let input=document.getElementById（'in'）；
释放=document.getElementsByClassName（“释放”）；
input.onkeyup=函数（）{
对于（变量i=0；i

您可以使用
document.getElementsByClassName（“out”）然后使用for循环更改所有不同的元素。

在for循环中，您可以通过
elems.item（index）
访问元素

请参见下面的代码段：


let input=document.getElementById（'in'）；
释放=document.getElementsByClassName（“释放”）；
input.onkeyup=函数（）{
对于（变量i=0；i

使用
out
类创建div，并使用
document.queryselector all
使用查询选择器获取所有元素


const input=document.getElementById（'in'）；
const divs=document.querySelectorAll（'.out'）；
input.onkeyup=函数（）{
divs.forEach（函数（div）{
div.innerHTML=input.value；
});
}
使用
out
类创建div，并使用
document.queryselector all
使用查询选择器获取所有元素


const input=document.getElementById（'in'）；
const divs=document.querySelectorAll（'.out'）；
input.onkeyup=函数（）{
divs.forEach（函数（div）{
div.innerHTML=input.value；
});
}
到目前为止，您尝试了什么？我马上看到的问题是，您正在为out获取单个元素，而不是多个元素

<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>


让输入=document.getElementById（'in'）；
let out=document.getElementsByClassName（'out'）；
input.onkeyup=函数（）{
对于每个（让项目输入输出）{
//使用类“out”遍历每个元素，并将innerHTML设置为输入值
item.innerHTML=input.value；
}
}
到目前为止，您尝试了什么？我马上看到的问题是，您正在为out获取单个元素，而不是多个元素

<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>


让输入=document.getElementById（'in'）；
let out=document.getElementsByClassName（'out'）；
input.onkeyup=函数（）{
对于每个（让项目输入输出）{
//使用类“out”遍历每个元素，并将innerHTML设置为输入值
item.innerHTML=input.value；
}
}
谢谢大家的帮助，我今天早上找到了解决方案：

<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;
          }
    })


让输入=document.getElementById（'句子'）；
设divs=document.querySelectorAll（'div）；
input.addEventListener（'keyup'，function（）{
for（设i=0；i

检查其他答案，我想知道以下两者之间的区别：

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

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

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

divs.forEach（函数（div）{…}）
对于每个（让项目输入输出）{…}
对于（var i=0；i
谢谢大家的帮助，我今天早上找到了解决方案：

<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;
          }
    })


让输入=document.getElementById（'句子'）；
设divs=document.querySelectorAll（'div）；
input.addEventListener（'keyup'，function（）{
for（设i=0；i

检查其他答案，我想知道以下两者之间的区别：

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

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

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

divs.forEach（函数（div）{…}）
对于每个（让项目输入输出）{…}
对于（var i=0；i
Post您尝试这样做，您将得到更多的响应。您发布的代码只有一个DIV。您希望更新的其他DIV是什么？您应该能够以相同的方式更新所有DIV。你到底遇到了什么问题？谢谢，我今天找到了解决方案，并查看了其他人发布的解决方案。我的错误是以错误的方式选择了DIV。发布您尝试这样做的结果，您将得到更多的响应。您发布的代码只有一个DIV。您希望更新的其他DIV是什么？您应该能够以相同的方式更新所有DIV。你到底遇到了什么问题？谢谢，我今天找到了解决方案，并查看了其他人发布的解决方案。我的错误是选错了演员。