Uncaught TypeError: document.getElementById(...) имеет значение null – порядок элементов в порядке, идентификатор извест ⇐ Html

[Anonymous]

Я знаю, что это не новость, и я нашел пару советов, как ее решить. Но я не могу от этого избавиться. Это мой простой код:

Код: Выделить всё

SVG Test


Select a circle







// do this if selected
function handleClick(elementId) {
alert('"' + elementId + '" selected');
}

// event listener
document.getElementById("circle").addEventListener("click", function () {
handleClick("circle");
});

// event listener
document.getElementById("circle_in_svg").addEventListener("click", function () {
handleClick("circle_in_svg");
});

Это показывает два круга.
Svg-файл «circle.svg» имеет точно такое же содержимое, что и три строки ниже . Меняется только идентификатор с "circle" на "circle_in_svg".
Итак, такая ситуация:

• ... находится ниже ... т.е. «circle_in_svg» должен быть известен.
• Два круга показаны в правильном порядке: сначала круг в файле, второй круг в строке.
• 'defer' или 'async' не помогают. Кстати, для меня пропуск обоих означает: загрузить файл и продолжить после загрузки файла, поэтому идентификатор должен быть доступен.

После загрузки этой страницы я получаю сообщение об ошибке (F12 в Mozilla): «Необработанная ошибка типа: document.getElementById(...) имеет значение null». И, конечно же, это не работает так, как задумано...
Поможете?

Подробнее здесь: https://stackoverflow.com/questions/793 ... ements-are