JavaScript 将输入值复制到 innerHTML on keyup (addEventListener)

Question

正如标题所说：我想将输入值复制到html元素（实时）。我已经尝试过这样的事情，但它不起作用...提前感谢！

<input type="text" id="test" value="">
<p id="box"></p>

<script type="text/javascript">
document.getElementById('test').addEventListener('keyup', function () {
document.getElementById('box').innerhtml = document.getElementById('test').value;
});
</script>

Answer 1

就像Geuis说的（发表评论），你的错误是innerHTML（而不是innerhtml），请参阅：https://codesandbox.io/s/724r405wo1

我鼓励您将代码更改为：

var box = document.getElementById('box')
document.getElementById('test').addEventListener('keyup', function (event) {
    box.innerHTML = event.target.value
});

因此，您不会每次都查询 dom。

Answer 2

您必须使用输入值来获取即时输入。喜欢：

document.getElementById('input').addEventListener('input', (e) => {
    document.getElementById('box').innerHTML = e.target.value
})