Блог

Главная - Вопросы по программированию - Наведение курсора мыши на событие не работает в javascript

Наведение курсора мыши на событие не работает в javascript

#javascript #css #loops #mouseevent #addeventlistener

#javascript #css #циклы #mouseevent #addeventlistener

Вопрос:

В основном я делаю проект odin projects Etch-a-Sketch. Они хотят, чтобы я создал сетку размером 16×16 и изменил ее на случайный цвет при наведении на нее. Мы должны создать divs для сетки в JS. Я их создал, и сетка выложена (не включал CSS, поскольку он не имеет значения). Я не могу заставить его изменить цвет, хотя!

Надеюсь, все в порядке, это мой первый пост здесь!

 // Declaring important variables//

const container = document.getElementById('container');

//16x16 square grid divs//

function makeRows(rows, cols) {

  container.style.setProperty('--grid-rows', rows);

  container.style.setProperty('--grid-cols', cols);

  for (i = 0; i < (rows * cols); i  ) {

    let cell = document.createElement('div');

    cell.addEventListener('mouseover', function() {

      let rcolor = '#'   Math.floor(Math.random() * 16777215).toString(16);

      cell.style.backgroundColor = rcolor;

    });

    container.appendChild(cell).className = "grid-item";

  };

};

makeRows(16, 16);  
 :root {
  --grid-cols: 1;
  --grid-rows: 1;
  padding: 0px;
  margin: 0px;
}

#container {
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  text-align: center;
}  
 <div id="container"></div>

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

1. Ваш код работает нормально …. я предполагаю, что это проблема с CSS …. которую вы не показали

2. @epascarello я обновил, чтобы показать CSS

3. Добавьте border: 1px solid black; в ячейки, это покажет вам, почему оно не работает

4. О боже, лол, спасибо. Я чувствую себя глупо, лол!

Ответ №1:

Ваши блоки не занимают никакого места, поэтому смотреть нечего.

 // Declaring important variables//

const container = document.getElementById('container');

//16x16 square grid divs//

function makeRows(rows, cols) {

  container.style.setProperty('--grid-rows', rows);

  container.style.setProperty('--grid-cols', cols);

  for (i = 0; i < (rows * cols); i  ) {

    let cell = document.createElement('div');

    cell.addEventListener('mouseover', function() {

      let rcolor = '#'   Math.floor(Math.random() * 16777215).toString(16);

      cell.style.backgroundColor = rcolor;

    });

    container.appendChild(cell).className = "grid-item";

  };

};

makeRows(16, 16);  
 :root {
  --grid-cols: 1;
  --grid-rows: 1;
  padding: 0px;
  margin: 0px;
}

#container {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  --aspect-ratio: 1/1;
  text-align: center;
}

.grid-item::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
 <div id="container"></div>

Ответ №2:

В вашем коде все работает нормально, вам просто нужно добавить ширину и высоту для вашей #container работы и границу для вашего контейнера, чтобы вы могли это видеть. В противном случае я протестировал это, и это сработало.

Добавьте это (пример):

 CSS:

#container {
    border: 1px solid black;
    height: 450px;
    width: 500px;
}