Мне было трудно сформулировать заголовок этого вопроса, но я не смог найти ничего более краткого.
Я хочу прикрепить какое-либо событие oninput к элементу (здесь поле input).Но по какой-то причине это не сработало.Я сузил проблему до схемы MWE (завершите MWE в конце).
addEvent();
document.body.innerHTML += "a";
addEvent() была просто функцией, которая изменяла свойство oninput поля input.Моя проблема заключалась в том, что addEvent() был проигнорирован.
Чтобы убедиться, что addEvent(); работает нормально, я также изменил value поля input и его backgroundColor в теле функции,Тем не менее, когда я запустил код, модификаций oninput и value нигде не было найдено, но backgroundColor был изменен в соответствии с функцией.
Более загадочно, если я напишу
document.body.innerHTML += "a";
addEvent();
Все работает как положено.
Мой вопрос состоит из двух частей:
- как мне исправить код
addEvent(), чтобы не былоимеет значение, если я напишу document.body.innerHTML += "a" до или после, результат будет одинаковым? - почему
backgroundColor работает нормально, а остальные, кажется, игнорируются?
Вот мой полный MWE ниже:
function addEvent() {
var fieldScore = document.getElementById("foo");
fieldScore.style.backgroundColor = "rgb(0,255,0)";
fieldScore.value = "a";
fieldScore.oninput = function () {
console.log("bar");
}
}
// document.body.innerHTML = buildForm();
addEvent();
document.body.innerHTML += "a";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form><input type="text" value="" name="foo" id="foo"></form>
<script type="text/javascript" src="mwe.js"></script>
</body>
</html>
Ожидается: то же самое, но с a в поле input.