@dualdeazz

Почему не считывается value инпута?

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

let test = () => {
let inp = document.querySelector('input')
let warn = document.createElement('div')
let att = inp.getAttribute('value')
inp.id = 'inpId'
let inpId = document.getElementById('inpId');
warn.classList.add('hi');
warn.innerHTML = 'Тестовая штука';
inp.insertAdjacentElement('afterend', warn);
if (inpId.value > 3) {
    warn.style.display = 'none';
}

}
test();
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
black1277
@black1277
Вольный стрелок
Вы считываете значения инпута однократно, в момент выполнения функции test. Для того чтобы это работало как вы хотите - нужно вешать обработчик на инпут, реагирующий на изменение значения в нем
let test = () => {
let inp = document.querySelector('input')
let warn = document.createElement('div')
let att = inp.getAttribute('value')
inp.id = 'inpId'
let inpId = document.getElementById('inpId');
inpId.addEventListener("input", ()=>{
if (inpId.value > 3) {
    warn.style.display = 'none';
}
})
warn.classList.add('hi');
warn.innerHTML = 'Тестовая штука';
inp.insertAdjacentElement('afterend', warn);
}
test();

ну и скрипт должен располагаться ниже инпута в потоке html
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Dr_Elvis
@Dr_Elvis
В гугле забанен
Так ты сначала создаёшь элемент, вставляешь его в html, а потом у объекта меняешь атрибут, а то что в html уже там. Нужно либо сначала делать проверку, а потом делать insertAdjacentElement, либо перед скрытием делать querySelector вставленного элемента
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы