我有一個簡短的JavaScript代碼，更新了div元素（下例中的box1）的內容。它用輸入元素中輸入的文本替換默認文本（「hello」）。如何在輸入時更新多個div（javascript onkeyUp）？

我想修改此代碼，以便它不僅更新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" />

來源

2015-10-13 akopacsi

你在正確的軌道上。只要使用相同的命令三次，內聯：

<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兼容）

來源

2015-10-13 10:19:10

謝謝你，約翰。 – akopacsi

這應該爲你工作:)

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

您basicly創建onkeydown事件，並將其連接到input.chatinput。我建議你，不要在HTML中使用內聯JavaScript

來源

2015-10-13 10:14:50

試試這個

<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

來源

2015-10-13 10:19:27

document.getElementsByClassName('box')元素的退貨單，所以你應該爲循環爲此在

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)" />

來源

2015-10-13 10:19:55

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

來源

2015-10-13 10:22:43

如何在輸入時更新多個div（javascript onkeyUp）？

回答

的jQuery：

角：

相關問題