Как изменить цвет фона при касании div с помощью JS

Я пытаюсь сделать лабиринт мышиного лабиринта, используя Html, Css и Javascript. где вы проиграете, если коснетесь любой из стен курсором мыши. Тем не менее, я хочу сделать цвет фона лабиринта красным, когда вы касаетесь одной из стен в лабиринте (игра окончена).

    var boundaries = document.querySelectorAll(".boundary");
var start = document.querySelector("#start");
var end = document.querySelector("#end");
var status = document.querySelector("#status");
var win = true;

  start.addEventListener("mouseover", function() {
    document.getElementById("status").innerHTML = "Move the mouse cursor over to "E" to win";
    for (var i = 0; i < boundaries.length; i++) {
      boundaries[i].addEventListener("mouseover", function() {
        win = false;
        this.style.background = "red";
        alert("You lost, try again!");
        this.style.background = "#eeeeee";
        document.getElementById("status").innerHTML = "You lost!";
      });
    }

  });

end.addEventListener("mouseover", function() {
  if (win == true) {
    document.getElementById("status").innerHTML = "You won!";
    alert("Gongratulations! You won!");
  }
  win = true;
});

в html я использую класс, чтобы сделать стены

  <div id = "maze">
        <div id = "start">S</div>
        <div class = "boundary" id = "boundary1"></div>
        <div class = "boundary"></div>
        <div class = "boundary"></div>
        <div class = "boundary"></div>
        <div class = "boundary"></div>

Я вижу два дефекта 1) "Move the mouse cursor over to "E" to win"; Либо нужно убрать кавычки вокруг E, либо поставить в одинарную кавычку 2. Нет элемента с id 'end

— 05.03.2019 09:23

Там также нет элемента id = "status", но я думаю, что мы пропустили часть HTML. Кроме них работает нормально..

— 05.03.2019 09:28

javascript html

05.03.2019 09:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

325

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если стены лабиринта заданы элементами div с классом boundary, я думаю, вам просто нужно добавить прослушиватель событий ко всем этим элементам div. Что-то вроде этой скрипки:

var boundaries = document.querySelectorAll(".boundary");
var start = document.querySelector("#start");
var end = document.querySelector("#end");
var status = document.querySelector("#status");
var win = true;

  start.addEventListener("mouseover", function() {
    document.getElementById("status").innerHTML = "Move the mouse cursor over to 'E' to win";
    for (var i = 0; i < boundaries.length; i++) {
      boundaries[i].addEventListener("mouseover", function() {
        win = false;
        this.style.background = "red";
        alert("You lost, try again!");
        this.style.background = "#eeeeee";
        document.getElementById("status").innerHTML = "You lost!";
      });
    }

  });


const walls = document.querySelectorAll(".boundary");

walls.forEach(wallDOM => {
   wallDOM.addEventListener("mouseover", function() {
        document.getElementById("maze").style.background = "red";
    });
});

document.getElementById("resetButton").addEventListener("click", function() {
        document.getElementById("maze").style.background = "black";
    });

#maze {
  width: 300px;
  height: 300px;
  position: relative;
  background: black;
}

#boundary1 {
  width: 50px;
  height: 5px;
  background: green;
  position: absolute;
  top: 0;
}

#boundary2 {
  width: 5px;
  height: 250px;
  background: green;
  position: absolute;
  top: 50px;
}

#boundary3 {
  width: 125px;
  height: 5px;
  background: green;
  position: absolute;
  top: 25px;
  left: 45px;
}

#boundary4 {
  width: 70px;
  height: 5px;
  background: green;
  position: absolute;
  top: 220px;
  right: 0;
}

#boundary5 {
  width: 5px;
  height: 80px;
  background: green;
  position: absolute;
  top: 75px;
  left: 120px;
}

 <div id = "maze">
   <div id = "start">S</div>
   <div class = "boundary" id = "boundary1"></div>
   <div class = "boundary" id = "boundary2"></div>
   <div class = "boundary" id = "boundary3"></div>
   <div class = "boundary" id = "boundary4"></div>
   <div class = "boundary" id = "boundary5"></div>
</div>

<button id = "resetButton">Reset BG</button>

На самом деле, посмотрите еще раз на вопрос, ваш код добавляет что-то, что уже сделано в исходном коде. Просто ОП устанавливает слушателей «стен» только при наведении курсора start. Смотрите: boundaries[i].addEventListener

— 05.03.2019 09:46

Вы действительно правы, мой плохой. Я честно потерял эту часть его кода

— 05.03.2019 09:53

05.03.2019 09:30