JavaScript 將輸入值復制到 keyup 上的 innerHTML (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

您必須使用輸入值來獲得即時輸入。 喜歡 ：

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

Answer 2

就像 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。