Javascript показывает мне TypeError, говоря, что моя переменная не определена
Я пытаюсь написать простое упражнение Javascript, где мне нужно разместить разный текст в разных частях страницы, но оно продолжает бросать мне
TypeError:sal[0] is undefined
Вот код javascript.
function sals(a,b,c,d,e,id)
{
var sal = document.getElementsByClassName(id);
sal[0].style.top=a;
sal[0].style.left=b;
sal[0].style.color=c;
sal[0].style.fontsize=d;
sal[0].style.zindex=e;
}
sals('5%','50%','yellow','250px','20','GB');
Что я делаю не так?
Для дальнейшего справки, вот мой HTML-код
<html>
<head>
<title>Hello</title>
<link rel = "stylesheet" href = "main.css">
</head>
<body>
<h1 class = "GB"> Holla</h1>
<script src = "main.js"></script>
</body>
</html>
Переместите свой скрипт после тега h1
Как сказал Мартинес, сценарий должен быть внизу тела. В противном случае скрипт загрузится и попытается найти элемент h1 до того, как он загрузится, что приведет к ошибке undefined.
Похоже, ваш javascript, вероятно, запускается до полной загрузки DOM (структуры HTML), а перемещение скрипта после тега является одним из возможных решений, вы также можете запустить свою функцию при загрузке DOM. В ванильном javascript вы можете использовать document.addEventListener('DOMContentLoaded', function () { sal('5%','50%','yellow','250px','20','GB'); }, false);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваш JavaScript запускается до полной загрузки страницы (DOM).
Ваш JS действительно должен быть в голове вашего HTML
Самый простой способ убедиться, что DOM загружен до запуска вашего JS, — добавить «отложить» к тегу скрипта таким образом;
<head>
<title>Hello</title>
<link rel = "stylesheet" href = "main.css">
<script src = "main.js" defer></script>
</head>
<body>
<h1 class = "GB"> Holla</h1>
</body>
</html>
Отвечает ли это на ваш вопрос? Почему jQuery или метод DOM, такой как getElementById, не находит элемент?