2

пытаюсь написать код, чтобы при нажатии менялся текст у тега <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 в массив, но мне так удобнее управлять данными), заранее спасибо!

2
  • А где у вас элемент #txt ? 18 янв 2022 в 18:59
  • исправил #txt, но теперь он только видит интервал, а таймауты внутри него - нет 18 янв 2022 в 19:11

2 ответа 2

3

Этой строчкой

txt.innerHTML = kar;

Вы удаляете все, что было внутри <h1 id="txt"></h1>. И хотя ссылка на элемент <span id="spn"> у Вас есть, на странице этот элемент теперь отсутствует.

<!DOCTYPE html>
<html lang=ru dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <h1 style="text-align:center;"><span id="txt">подсвеченный текст</span><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 colors = [" синий", " красный", " жёлтый", " оранжевый"];
    var index = 0;
    var timer;
    btn.onclick = () => {
      btn.style.visibility = "hidden";
      txt.textContent = "цвет";
      timer = setInterval(function() {
        spn.textContent = colors[index];
        index = ++index % colors.length;
      }, 500);
    }
  </script>
</body>

</html>

2

Не знаю, чего именно хотел добиться автор. Я бы сделал вот так.

let цвета = [
['#F44336','красный',3000],
['#E91E63','розовый',5000],
['#9C27B0','пурпур',7000],
['#673AB7','глубокий пурпур',4000],
['#3F51B5','индиго',2000],
['#2196F3','голубой',6000],
['#03A9F4','светло-голубой',4000],
['#00ACC1','циановый',5000],
['#009688','чирок',7000],
['#43A047','зеленый',2000],
['#558B2F','светло-зеленый',1000],
['#827717','лаймовый',2000],
['#F57F17','желтый',3000],
['#E65100','оранжевый',6000],
['#F4511E','глубокий оранжевый',4000],
['#795548','коричневый',3000],
['#757575','серый',1000],
['#546E7A','голубо-серый',2000],
];

const ждать = миллисекунд => new Promise(res => setTimeout(res,миллисекунд));
button.onclick = async () => {
  // Перемешаем рандомно
  цвета.sort(()=>Math.sign(Math.random()-.5));
  // Убираем кнопку
  button.style.display = 'none';
  let индекс = -1;
  // Бесконечный цикл
  while(1){
    индекс = ++индекс % цвета.length;
    let [ цвет, название, миллисекунд ] = цвета[индекс];
    // Ожидаем кадр
    requestAnimationFrame(()=>{
      // Цвет фона
      document.body.style.background = цвет;
      // Надпись
      message.innerHTML = название;
    });
    // Таймаут
    await ждать(миллисекунд);
  }
};
body {
  transition: all 1000ms;
  text-align: center;
}

#message, #button {
  height: 20vh;
  top: 40vh;
  font-size: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}

#message {
  width: 80vw;
  left: 10vw;
  color: #fff;
  text-shadow: 0 0 1vh #000;
}

#button {
  width: 50vw;
  left: 25vw;
  border: 1vw solid #000;
}
<div id="message"></div>
<div id="button">Нажми</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.