Не работает событие change при создании
Получаю пустую строку когда идет переключатель по тегу <select>.
Когда теги <option> создаю напрямую в HTML, то все работает, но когда создаю их в JavaScript, то не работает. Почему?
Ведь DOM уже создан, и другие события click при этом работают?
const selectElement = document.createElement('select');
const op = document.createElement('option');
const op2 = document.createElement('option');
op.label ='fgg';
op2.label ='7886';
selectElement.append(op, op2);
document.body.append(selectElement);
selectElement.addEventListener("change", (event) => {
alert(event.target.label); // пустая строка (в случае с "input" - то же самое)
// alert(event.target.value) - тоже ничего не дает
});
Ответы (2 шт):
Решение нашел в другом синтаксисе (без атрибута label)
const selectElement = document.createElement('select');
selectElement.options[0] = new Option('1');
selectElement.options[1] = new Option('2');
document.body.append(selectElement);
selectElement.addEventListener("change", (event) => {
alert(event.target.value);
});
подозреваю, что загадка кроется в ключевом слове const Если op и op2 - это константы, разве можно им свойства изменить? Вообще любовь к ключевому слову const должна быть дозированная ;)
И если появляется пустая строка - это не значит, что "Не работает событие change", ведь алерт появляется? Это только значит, что не подтянулось нужное значение.
Для проверки работоспособности кода самое надёжное втыкать в обработчик события лог самого события, а в консоли его внимательно рассмотреть:
(event) => {
console.log(event)
alert(event.target.label); // пустая строка (в случае с "input" - то же самое)
}
Стало бы сразу понятно, что всё работает, только event.target.label пустой )))