Блог

Главная - Вопросы по программированию - Почему text.value не возвращает значение ввода?

Почему text.value не возвращает значение ввода?

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

этот код не работает, но я не понимаю почему.

HTML:

 <button id="button">add item</button>
<input type="text" id="text" />

JavaScript:

 let text = document.querySelector('#text').value;
let button = document.querySelector('#button');
button.addEventListener('click', ()=>{
alert(text)
})

Когда я щелкнул, ‘alert’ пуст — без текста, который я написал.

Комментарии:

1. Вам нужно получить значение в функции alert(text.value) и определить элемент только в начале let text = document.querySelector('#text') . Таким образом, он принимает значение click каждый раз.

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

Ответ №1:

Это потому, что вы немедленно объявляете значение text, даже не изменяя его. Как только страница загружается, она мгновенно принимает значение ввода с id =»text», что было бы равно пустой строке, поскольку у вас изначально не было времени что-либо вводить в нее. Если вы установите для атрибута ‘value’ ввода значение ‘5’, например, предупреждение всегда будет предупреждать ‘5’.

Чтобы всегда получать текущее значение в ‘#text’, вам нужно будет установить значение ‘text’ внутри прослушивателя событий. Итак, что-то вроде этого:

 <body>
    <button id="button">add item</button>
    <input type="text" id="text" />
    <script>
        let button = document.querySelector('#button');
        
        button.addEventListener('click', ()=>{
            let text = document.querySelector('#text').value;
            alert(text);
        });
    </script>
</body>

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