JS TypeError: texte is null - как начать с textarea, которое не равно null?

Question

Я новичок в JS.

Я пытаюсь получить входные данные textarea в div, и код, который я создал (ниже), возвращает ошибку: TypeError: texte is null.

Я не понимаю, почему мой Текстовое поле должно быть заполнено и не может быть нулевым или неопределенным, поскольку оно должно начинаться с пустого значения.

JS:

const texte = document.getElementById("texte");
const render = document.getElementById("render");

texte.addEventListener('keyup', function(){
    render.innerHTML = texte.value;
});

HTML:

<form>
    <textarea rows=5 cols=33 id="texte" name="texte" > test test test test </textarea>

    <button id="ajouter" name="ajouter" >Ajouter</button>

    <div id="render" name="render" >div</div>

</form>

Answer 1

Вы можете добавлять прослушиватели событий только после завершения загрузки документа, иначе вы рискуете получить доступ к элементу, который еще не был отрисован.

Попробуйте обернуть весь код следующим образом:

document.addEventListener("DOMContentLoaded", function(event) {

//your code here

}

Answer 2

Ключевое слово const означает значение, которое нельзя изменить. Поэтому вам нужно использовать ключевое слово var. И код javascript должен быть после загрузки элементов html.

<form>
    <textarea rows=5 cols=33 id="texte" name="texte" > test test test test </textarea>

    <button id="ajouter" name="ajouter" >Ajouter</button>

    <div id="render" name="render" >div</div>

</form>

<script>
var texte = document.getElementById("texte");
var render = document.getElementById("render");

texte.addEventListener('keyup', function(){
    render.innerHTML = texte.value;
});
</script>

Для разрыва строки используйте следующий код.

texte.addEventListener('keyup', function(){
    render.innerHTML = texte.value.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + '<br/>' + '$2');
});