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

Question

[dualdeazz]

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

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

Answer 1

[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

Comments

[dualdeazz]

Спасибо большое!

Answer 2

[Elvis]

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

Comments

[dualdeazz]

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

}
test();
Вот так? Или я может неправильно понял. Но не работает.

[Elvis]

dualdeazz, уточнение: а input какой type имеет?

[Elvis]

Добавь преобразование в число. Попробовал на скорую руку - работает. Только каждый раз добавляется варнинг, нужно дописать чтобы "если есть, то изменить у текущего. Если нет, то создать новый"
if(parseInt(inpId.value) > 3)