Фон в HTML не меняется в зависимости от номера переменной

Question

Я пытаюсь сделать простую игру, в которой фон будет меняться каждые 20 прыжков. Есть одна проблема. Когда счетчик прыжков достигнет 20, фон не изменится. Я понятия не имею, что я делаю не так. Я пытался использовать «document.getElementById ('sample'). Inner html», чтобы изменить код CSS на обновленный CSS, который меняет фон. Кажется, это не работает. Я проверил консоль JavaScript и все, что она говорит: «Uncaught TypeError: Невозможно установить свойство 'inner HTML' для null с индексом. html: 15". Для проверки прыжков используется кнопка.

Вот весь документ: (я знаю, что это довольно грязно)

Answer 1

Это из-за этой части:

    if (jump_count < 20){
        //This willchange the background to be 'field.png'
        document.getElementById('background').innerHTML = "html{background-color:black;animation:day_cycle 180s linear infinite;}.background{background:url('test.png') repeat-x;height:100%;width:3050px;animation:slide 3s linear infinite;}@keyframes slide{0%{transform:translate3d(0, 0, 0);}100%{transform:translate3d(-1600px, 0, 0);}}@keyframes day_cycle{0% {background-color:#0063fd;}15% {background-color:orange;}30% {background-color:red;}45% {background-color:#4B0082;}60% {background-color:red;}75% {background-color:orange;}100% {background-color:#0062fd;}}";
    } else if (jump_count > 20 && jump_count < 40){
        document.getElementById('background').innerHTML = "html{background-color:black;animation:day_cycle 180s linear infinite;}.background{background:url('field.png') repeat-x;height:100%;width:3050px;animation:slide 3s linear infinite;}@keyframes slide{0%{transform:translate3d(0, 0, 0);}100%{transform:translate3d(-1600px, 0, 0);}}@keyframes day_cycle{0% {background-color:#0063fd;}15% {background-color:orange;}30% {background-color:red;}45% {background-color:#4B0082;}60% {background-color:red;}75% {background-color:orange;}100% {background-color:#0062fd;}}";
    } else {
        //Nothing happens
    }

Эта часть скрипта не заключена в функцию, поэтому она выполняется немедленно. Поскольку тег script находится внутри заголовка, он выполняется без ожидания готовности страницы. Таким образом, элемент background еще не существует.

Вы можете поместить эту часть в обработчик для события ready страницы, но самое простое - просто переместить весь тег script в конец тела.

Демонстрация:

• Ваш код как есть (с ошибкой типа): https://jsfiddle.net/g1vLbf8a/
• Скрипт перемещен в конец тела (без ошибки TypeError): https://jsfiddle.net/bemt2z0u/

Answer 2

Uncaught TypeError: Невозможно установить свойство 'inner HTML' для null с индексом. html: 15 ". Это будет означать, что он не нашел элемент, который вы пытались получить. Используйте console.log( document.getElementById('sample'));, чтобы проверить вывод ... Если элемент действительно не найден, то дважды проверьте ваши html идентификаторы. Одна возможная ошибка, которую я вижу, состоит в том, что у вас есть 2 одинаковых идентификатора. "Background", которые никогда не должны происходить