0

В рамках изучения JS решил создать 3 div`а и сделать так, чтобы при наведении на них background-color рандомно менял цвет. Реализовал все таким способом:

(function getColor() {
  const colors = ["red", "green", "blue", "black", "magenta", "pink"];

  function getRandomIntInclusive(min, max) {
    min = Math.ceil(0);
    max = Math.floor(6);
    let output = Math.floor(Math.random() * (max - min + 1)) + min; 
    return output;
  }

  function randomColor(someRndNumber, colorArray) {
    let colorResult = colorArray[someRndNumber];
    return colorResult;
  }
  let rndResult = getRandomIntInclusive();
  let rndColor = randomColor(rndResult, colors);

  const getColoredDivs = document.querySelectorAll(".coloredDiv");
  getColoredDivs.forEach((elem) => {
    elem.addEventListener("mouseover", () => {
      elem.style.backgroundColor = rndColor;
      getColor();
    });
  });

  getColoredDivs.forEach((elem) => {
    elem.addEventListener("mouseout", () => {
      elem.style.backgroundColor = "white";
    });
  });
})();

И первые 10-12 итераций все работает, как я хочу. Цвета на бэках рандомно меняются при наведении курсора на див (представлены на экране, как три квадрата с черными границами), но затем начинается какая-то бесконечная лютая рандомизация цифр(я проверил добавив console.log в функции рандомизаторе). Браузер подвисает. Убить процесс можно только через диспетчер задач. Думаю, что проблема в том, что рандомизация значения от 0 до 6 происходит каждый раз, пока я вожу курсором по поверхности дива. Но, как предотвратить это я пока не знаю)

6
  • А зачем ты вызываешь getColor в mouseover?
    – Alexey Ten
    19 сен 2022 в 8:16
  • 1
    У вас рекурсия и переполнение стека возникает при событии mouseover., так как идёт вызов getColor и листенеры снова вешаются и копятся 19 сен 2022 в 8:17
  • я понял. но, если не вызывать при mouseover функцию заново, то выбирается один раз один цвет, отображается на всех квадратах и все. на этом работа кода прекращается. другой цвет будет только после обновления страницы. а я хотел бы сделать так, чтобы каждый раз новый цвет. но, в результате рекурсия и переполнение стека
    – Pacemaker
    19 сен 2022 в 8:24
  • Потому что rndColor надо считать внутри обработчика события
    – Alexey Ten
    19 сен 2022 в 8:34
  • то есть, внутри обработчика события создать функцию, которая будет считать и рандомные цифры и вычислять цвет?
    – Pacemaker
    19 сен 2022 в 8:44

1 ответ 1

0

Переусложнил реализацию.. getRandomIntInclusive(min, max) { min = Math.ceil(0); max = Math.floor(6); Math.ceil округляет до ближайшего большего целого. Смысл операции с 0.. Math.floor округляет до ближайшего меньшего целого. Смысл округлять 6..

const colors = ["red", "green", "blue", "black", "magenta", "pink"];

const getColoredDivs = document.querySelectorAll(".coloredDiv");

getColoredDivs.forEach((elem) => {

  elem.addEventListener("mouseover", () => {
    //elem.style.backgroundColor = "#"+Math.floor(Math.random()*16777215).toString(16);
    elem.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]
  });

  elem.addEventListener("mouseout", () => {
    elem.style.backgroundColor = "white";
  });

});
body {
  display: flex;
}

.coloredDiv {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}
<div class='coloredDiv'></div>
<div class='coloredDiv'></div>
<div class='coloredDiv'></div>
<div class='coloredDiv'></div>
<div class='coloredDiv'></div>
<div class='coloredDiv'></div>

6
  • Все работает! И намного проще. Надо запомнить) Спасибо! А рандомизатор я взял с MDN. Передрал под чистую)) А выясняется, что можно было сделать по другому)
    – Pacemaker
    19 сен 2022 в 8:53
  • @Pacemaker На здоровье! :) Не запомнить, а разобрать и осмыслить.
    – Rudi
    19 сен 2022 в 9:28
  • @Pacemaker если ответ Вам помог, то ставьте галочку рядом с ответом как "принятый" чтобы другие могли его найти. 19 сен 2022 в 9:41
  • Всё - галочку поставил! Еще раз - спасибо!
    – Pacemaker
    19 сен 2022 в 11:39
  • @Pacemaker Я никогда не прошу. Разобрался?
    – Rudi
    19 сен 2022 в 11:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.