Question

我正在寻找一种在多个地方展示我的输入内容的方法，但是当我放置getelementsbyclassname('output')代替getElementById('output')

时没有任何反应

我实际上有这个，但由于getElementById，只有第一个元素正在改变

<script>
function functionname() {
     document.getElementById('output').innerHTML=document.getElementById('input').value;
}
</script>

<input type="text" id="input" onkeyup="functionname();return false;" />

<span id="output"></span>

先谢谢了，对不好的英语感到抱歉

Answer 1

两个问题：

您没有“输出”类的元素。
JavaScript区分大小写。 getelementsbyclassname应为getElementsByClassName。

<span class="output"></span>

var input = document.getElementById('input'),
    outputs = document.getElementsByClassName('output')

for (i=0; i<outputs.length; i++)
    outputs[i].innerHTML = input.value;

但是，当您标记jquery时，您可以改为使用以下内容：

$('.output').html($('#input').val());

Answer 2

好像你想根据输入值

更新多个div的html

HTML

<input type="text" id="input" />
<div class="output"></div>
<div class="output"></div>

JS

$('.output').html($('#input').val());

JSFiddle：http://jsfiddle.net/DDnXs/

Answer 3

var spans = [].slice.call(document.querySelectAll('.output'));

var val = document.getElementById('input').value;

for (var i = 0; i < spans.length; i++) {
   spans[i].innerHTML = val;
}

这适用于类output：

的跨度

 <span class="output"></span>
 <span class="output"></span>
 <span class="output"></span>

获取多个div中的输入内容

3 个答案: