«Невозможно установить свойство «innerHTML» из неопределенного», но оно определено
Любопытная проблема: при использовании «.innerHTML» в объекте элемента JS я вижу ошибку «Невозможно установить свойство «innerHTML» из неопределенного», но оно не является неопределенным, поскольку я могу вывести его на консоль с помощью console.info (myElement) на линии раньше. Эта ошибка появляется при использовании Chrome и Firefox.
Кроме того, 'myElement.innerHTML("text")' работает даже с этой ошибкой, поэтому мой код работает (функционально), но мне интересно, может ли это создать некоторые непредвиденные проблемы, или это просто ошибка.
Код, который создает проблему/ошибку:
var errorList = event.target.getElementsByClassName("errorList")[0];
console.info(errorList); // successfully displays my intended element
errorList.innerHTML = ""; // successfully clears the <ul class='errorList'>
Сам по себе этот код не выдаст никаких ошибок, если нет элемента с классом errorList, так что да, создайте jsFiddle, воспроизводящий проблему.
html элемента?
где код, который создает проблему?
В дополнение к моему предыдущему комментарию вопрос немного сбивает с толку. Вы говорите: «Это код, который создает ошибку», но затем комментарии к этому коду говорят, что он делает все «успешно»…?
@MTL-VRN да, вот и все, ура ;)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Даже если вы используете события, переключитесь на document при вызове getElementClassByName.
event.target не всегда то, во что вы верите, попробуйте зарегистрировать это, чтобы выявить проблему.
Рабочий пример
document.getElementsByClassName("errorList")[0].addEventListener("click",
function(event){
var errorList = document.getElementsByClassName("errorList")[0];
console.info(errorList); // successfully displays my intended element
errorList.innerHTML = ""; })<ul class = "errorList">
<li>test</li>
</ul>Пример события (возвращает неопределенное значение в журнале)
document.getElementsByClassName("errorList")[0].addEventListener("click",
function(event){
var errorList = event.getElementsByClassName("errorList")[0];
console.info(errorList); // successfully displays my intended element
errorList.innerHTML = ""; })<ul class = "errorList">
<li>test</li>
</ul>Ваш код может запускаться несколько раз, возможно, при запуске или загрузке страницы. Если это произойдет, и в один из моментов его запуска элемент «errorList» не существует, ошибка может быть выдана в это время, даже если он успешно запустится позже.
Чтобы проверить это, я рекомендую добавить что-то вроде
console.info("TEST!");
перед
var errorList = event.target.getElementsByClassName("errorList")[0];
Если "ТЕСТ!" появляется несколько раз в консоли, вы будете знать, что он запущен более одного раза.
Вам нужно добавить событие загрузки, чтобы получить элемент, когда DOM будет готов.
function init(){
var el = document.getElementById("btn");
el.addEventListener('click',function(){ alert("Button clicked"); });
}
addEventListener('load',init);<button id = "btn">Click</button>
Добавьте код, который повторяет проблему. Элемент, для которого вы пытаетесь установить
innerHTML, в данный момент являетсяundefined. Может опечатка, может еще не загрузилось и т.д. Но ваш вопрос не оставляет нам ничего, кроме "возможностей" и догадок. Мы можем помочь вам больше, если вы поможете нам больше :)