的jQuery：

Question

我有一个简短的javascript代码，用于更新div元素的内容（下例中的box1）。它用输入元素中键入的文本替换默认文本（“hello”）。

我想修改这段代码，这样不仅可以更新box1 div，还可以更新box2和box3。我试图使用getElementsByClassName，但我无法使其工作。如果有人帮助我，我将非常感激。谢谢。

<div class="font1" id="box1">hello</div>
<div class="font2" id="box2">hello</div>
<div class="font3" id="box3">hello</div>
<input type='text' name='fname' class='chatinput' onkeyUp="document.getElementById('box1').innerHTML = this.value" />

Answer 1

这应该适合你:)

document.querySelector('.chatinput').onkeydown = function(){
    var box1 = document.querySelector('#box1'),
        box2 = document.querySelector('#box2'),
        box3 = document.querySelector('#box3');

    box1.innerHTML = box2.innerHTML = box3.innerHTML = (this.value);
}

您基本上创建了一个onkeydown事件，并将其附加到input.chatinput。我建议你，不要在HTML中使用内联javascript

Answer 2

你走在正确的轨道上。只需使用相同的命令三次，内联：

<input type="text" name="fname" class="chatinput" onkeyUp="
  document.getElementById('box1').innerHTML = this.value;
  document.getElementById('box2').innerHTML = this.value+'hello';
  document.getElementById('box3').innerHTML = this.value+'world';" />

或使用JavaScript函数：

<script>
function clickMe(s){
  document.getElementById("box1").innerHTML = s;
  document.getElementById("box2").innerHTML = s+"hello";
  document.getElementById("box3").innerHTML = s+"world";
}
</script>
<input type="text" name="fname" class="chatinput" onkeyUp="clickMe(this.value)" />

（旁注：对HTML属性使用双引号。即使所有浏览器都能理解你是否使用单引号，双引号是标准的，如果你想成为XML / XHTML / HTML5-是唯一允许的方式兼容）

Answer 3

试试这个

<div class="font1" id="box1">hello</div>
<div class="font2" id="box2">hello</div>
<div class="font3" id="box3">hello</div>
<input type='text' name='fname' class='chatinput' onkeyUp="document.getElementById('box1').innerHTML = this.value; document.getElementById('box2').innerHTML = this.value; document.getElementById('box3').innerHTML = this.value; " />

<强> Demo Here

Answer 4

document.getElementsByClassName('box')返回元素列表，因此您应该在for循环中执行此操作

function onKeyUp($this){
  for(var i in document.getElementsByClassName('box'))
    document.getElementsByClassName('box')[i].innerHTML = $this.value
  }

<div id="box1" class="box">hello</div>
<div id="box2" class="box">hello</div>
<div id="box3" class="box">hello</div>
<input type='text' name='fname' class='chatinput' onkeyUp="onKeyUp(this)" />

Answer 5

的jQuery：

jsfiddle

    function foo(value){
        $("div").each(function(){
            this.innerHTML = value;
        })
    };

角：

jsfiddle

<body ng-app>
    <div class="font1" id="box1">Hello {{value}}</div>
    <div class="font2" id="box2">hi {{value}}</div>
    <div class="font3" id="box3">nihao {{value}}</div>
    <input type='text' name='fname' class='chatinput' ng-model="value" />
</body>

如何在键入时更新多个div（javascript onkeyUp）？

5 个答案:

的jQuery：

角：