Блог

Главная - Вопросы по программированию - Как я могу заставить div изменить свое фоновое изображение после того, как произошло определенное событие?

Как я могу заставить div изменить свое фоновое изображение после того, как произошло определенное событие?

#javascript

Вопрос:

Я создал игру с использованием JavaScript, и я хотел бы, чтобы фон изменился после окончания игры или после isGamerOver = правда, чтобы быть более конкретным. Вот что у меня сейчас есть. Прямо сейчас, когда игра заканчивается, я получаю неперехваченную ошибку типа: Не удается прочитать свойство «стиль» null.

 function gameOver() {
    console.log('game over')
    isGamerOver = true
    while (grid.firstChild) {
        grid.removeChild(grid.firstChild)
    }
    grid.innerHTML = score
   
    clearInterval(upTimerId)
    clearInterval(downTimerId)
    clearInterval(leftTimerId)
    clearInterval(rightTimerId)
   
    if(isGamerOver = true){
    document.getElementById("grid").style.backgroundImage="url('backgrounds/background-up.png')";
    }else{
    document.getElementById("grid").style.backgroundImage="url('backgrounds/game-over.png')";
    }
}

Вот таблица стилей, которую я пытаюсь изменить

 .grid  {
width: 400px;
height: 600px;
background-image: url(backgrounds/background-up.png);  
position: relative;
font-size: 100px;
text-align: center;
color: #fff;
}

Вот мой HTML

 <!DOCTYPE html>
    <html lang="en"  dir="ltr">
    <head>
        <meta charset="UTF-8">
        <title>100% Not Doodle Jump</title>
        <link rel="stylesheet" href="style.css"></link>
        <script src="app.js" charset="utf-8"></script>
    </head>
    <body>
    
        <div class="grid"></div>
    
    </body>
 </html>

Я также добавил div в JavaScript

 const grid = document.querySelector('.grid')
const doodler = document.createElement('div')

Комментарии:

1. поделитесь каким-нибудь html-кодом , возможно, вам не хватает идентификатора

2. Вы используете getElementById , но у вашего CSS есть .grid , указывающее, что «сетка» — это класс , а не идентификатор

3. Хорошо, я обновил код, включив в него также мои HTML-элементы. Я изменил getElementById на getElementsByClassName, и я все еще получаю ту же неперехваченную ошибку типа

Ответ №1:

Если вы определили свою сетку таким образом:

 const grid = document.querySelector('.grid')

измените это:

 if(isGamerOver = true){
   document.getElementById("grid").style.backgroundImage="url('backgrounds/background-up.png')";
}else{
   document.getElementById("grid").style.backgroundImage="url('backgrounds/game-over.png')";
}

к этому:

 if(isGamerOver = true){
   grid.style.backgroundImage="url('backgrounds/background-up.png')";
}else{
   grid.style.backgroundImage="url('backgrounds/game-over.png')";
}
Метки: ,