JavaScript копирует входное значение в innerHTML по keyup (addEventListener)

Question

Как видно из заголовка: я хочу скопировать входное значение в элемент HTML (в режиме реального времени).Я пробовал что-то подобное, но это не работает ... THX заранее!

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

Таким образом, вы не запрашиваете дом каждый раз.

Answer 2

Вы должны использовать входное значение, чтобы получить мгновенный ввод.Нравится:

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