пытаюсь написать код, чтобы при нажатии менялся текст у тега <span>
, но почему-то выскакивает ошибка
16index.html:24 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
<!DOCTYPE html>
<html lang=ru dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="txt" style="text-align:center;">подсвеченный текст<span id="spn"> </span></h1>
<hr>
<input type="button" name="btn" id="btn" value="узнать прямо сейчас!" style="left:50%;transform:translate(-50%, 0);position:absolute;">
<script type="text/javascript">
var btn = document.querySelector("#btn");
var txt = document.querySelector("#txt");
var spn = document.querySelector("#spn");
var kar = "цвет";
var kar1 = " синий";
var kar2 = " красный";
var kar3 = " жёлтый";
var kar4 = " зелёный";
var kar5 = " оранжевый";
btn.onclick = () => {
btn.style.visibility = "hidden";
setInterval(function() {
txt.innerHTML = kar;
setTimeout(function() {
spn.innerHTML = kar1;
setTimeout(function() {
spn.innerHTML = kar2;
setTimeout(function() {
spn.innerHTML = kar3;
setTimeout(function() {
spn.innerHTML = kar4;
setTimeout(function() {
spn.innerHTML = kar5;
}, 500);
}, 500);
}, 500);
}, 500);
}, 0);
}, 3000);
}
</script>
</body>
</html>
то есть каждые пол секунды должен меняться текст, разделил на 2 тега так как хочу потом сделать смену цвета шрифтов 2 слова, но это позже, я хочу заранее спросить, будут ли работать все setTimeout
так, как задумано (задумка: сработал 1 таймаут, через пол секунды после завершения одного таймаута начинает работать другой, и так 5 таймаутов, после того как сыграют все таймауты сыграет свою роль setInterval
и начнётся отсчёт таймаутов заново и так этот интервал будет длиться без остановки) или мне стоит все таймауты писать отдельно, а цифры до начала исполнения каждого таймаута складывать? (и да, я знаю то я мог положить все эти kar в массив, но мне так удобнее управлять данными), заранее спасибо!