Не работает смена фона при нажатии на кнопку

Question

Всем привет! Я пытаюсь сделать так, чтобы при нажатии на "кнопку" менялся полностью задний фон, но почему-то JS не может получить значение style, ведь вроде я всё обозначил правильно.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>Page Title</title>
        <script>
var bgcol = Math.ceil(Math.random() * 7);
var body1 = document.getElementById("bg");
function a1() {
    colors();
}
function colors() {
    switch (bgcol) {
        case 1:
            body1.style.backgroundColor = "#CC3300";
            break;
        case 2:
            body1.style.backgroundColor = "#FF6600";
            break;
        case 3:
            body1.style.backgroundColor = "#FFFF00";
            break;
        case 4:
            body1.style.backgroundColor = "#99FF33";
            break;
        case 5:
            body1.style.backgroundColor = "#66FFFF";
            break;
        case 6:
            body1.style.backgroundColor =  "#00FFFF";
            break;
        case 7:
            body1.style.backgroundColor =  "#6600FF";
            break;
        deafult:
            body1.style.backgroundColor =  "#FFFFFF";
            break;
}
}
        </script>
    </head>
    <body id="bg">
        <h1 onClick="a1()">test button</h1>
    </body>
</html>

Задумывал, чтобы генерировалось рандомное число от 1 до 7, и каждое число обозначает цвет, и при нажатии менялся фон от этого числа. Но что-то опять пошло не так ?, заранее спасибо.

Answer 1

Во-первых

<html>
  <head>
    ...
    <script>
      var bgcol = Math.ceil(Math.random() * 7);
      var body1 = document.getElementById("bg");

Так как страница грузится каскадом, сверху-вниз, в момент когда скрипт находится выше <body> (или любого вызываемого элемента), то объект document и знать не знает о существование запрашиваемого .getElementById('bg'), такого элемента не существует в коллекции.

Как это исправить, либо вызывайте Ваш скрипт в конце (или после) <body>, либо используйте обработчик document.addEventListener('DOMContentLoaded', function() {}) - это событие начнёт отрабатывать ваш код, когда весь html обработается (подробнее о событие)

var bgcol = Math.ceil(Math.random() * 7); // Функцию без обращения к элементам можно спокойно оставить "снаружи", т.к. она будет содержать своё значение

document.addEventListener('DOMContentLoaded', function() {
  var body1 = document.getElementById("bg");
  
  body1.innerText = bgcol;
});

#bg {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  font-size: 45vh;
}

<body id="bg"></body>

Во-вторых

Что-то мне подсказывает, что рандомный цвет фона должен быть другой, каждый раз при нажатие на кнопку. Если так, то при нажатие обнаружите, что цвет будет менять только один раз.
Всё потому, что вы записываете переменную один раз и храните её, а её значение пропускаете через switch().

Для обновления переменной каждый раз при использование функции, вам нужно внести эту переменную в тело функции

function colors() {
  // Так значение переменной будет вызываться каждый раз, когда вы будете вызывать функцию color()
  var bgcol = Math.ceil(Math.random() * 7);
  switch (bgcol) {
    ...

var body1;

document.addEventListener('DOMContentLoaded', function() {
  body1 = document.getElementById("bg");
});

function a1() {
  colors();
}

function colors() {
  var bgcol = Math.ceil(Math.random() * 7); // Теперь цвет будет обнавляться каждый раз при вызове функции
  switch (bgcol) {
    case 1:
      body1.style.backgroundColor = "#CC3300";
      break;
    case 2:
      body1.style.backgroundColor = "#FF6600";
      break;
    case 3:
      body1.style.backgroundColor = "#FFFF00";
      break;
    case 4:
      body1.style.backgroundColor = "#99FF33";
      break;
    case 5:
      body1.style.backgroundColor = "#66FFFF";
      break;
    case 6:
      body1.style.backgroundColor = "#00FFFF";
      break;
    case 7:
      body1.style.backgroundColor = "#6600FF";
      break;
      deafult:
        body1.style.backgroundColor = "#FFFFFF";
      break;
  }
}

<body id="bg">
  <h1 onClick="a1()">test button</h1>
</body>

Ну и мой совет, старайтесь упрощать код.
В вашем случае я бы не стал использовать swicth() и нужные цвета запихал бы в отдельную переменную, в качестве массива.

document.addEventListener('DOMContentLoaded', function() {
  let body = document.body,
      colors = ['#CC3300', '#FF6600', '#FFFF00', '#99FF33', '#66FFFF', '#00FFFF', '#6600FF'];
      
  document.querySelector('#change-bg').addEventListener('click', function() {
    let rand = Math.floor(Math.random() * colors.length);
    body.style.backgroundColor = colors[rand];
  });
});

<body>
  <h1 id="change-bg">test button</h1>
</body>

БЛОГ НА HUSL

Не работает смена фона при нажатии на кнопку

Ответы (1 шт):