1

let box = document.getElementById('box');
box.onmouseover = function(animate){
    box.style.backgroundColor = 'red';
    box.onmouseout = function(){
        box.style.backgroundColor = "";
    }
    box.onmouseover = function(){
        box.style.backgroundColor = 'yellow';
        box.onmouseout = function(){
            box.style.backgroundColor = "";
        }
        box.onmouseover = function(){
            box.style.backgroundColor = 'green';
            box.onmouseout = function(){
                box.style.backgroundColor = "";
            }
        }
    }
}
#box{
            width: 30%;
            height: 300px;
            margin: 0 auto;
            border: 2px solid #000;
            background-color: rgb(163, 0, 109);
        }
<div id="box">

    </div>

И так, я новичок в изучении JS и мне нужно сделать так, чтобы все цвета повторялись по кругу при наведении на них(красный, желтый, зеленый и опять красный...)из этого кода!

2 ответа 2

3

Циклирую код:

var colors = ['red', 'yellow', 'green'];
var colorIndex = 0;
let box = document.getElementById('box');
box.onmouseover = function(animate) {
  box.style.backgroundColor = colors[colorIndex];
};
box.onmouseout = function() {
  box.style.backgroundColor = "";
  colorIndex = ++colorIndex % colors.length;
};
#box {
  width: 30%;
  height: 300px;
  margin: 0 auto;
  border: 2px solid #000;
  background-color: rgb(163, 0, 109);
}
<div id="box"></div>

0
2

Можно заметить, что обработчик mouseout не меняется и одинаковый для всех вариантов, поэтому его можно установить один раз.

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

Таким образом смена цвета может выглядеть так

current = colors[curren]

где current - Это текущий цвет. Менять текущий цвет можно, например, в обработчике mouseout

var colors = {
  red: 'yellow',
  yellow: 'green',
  green: 'red'
}
var current = 'red';
let box = document.getElementById('box');
box.onmouseover = function(animate) {
  box.style.backgroundColor = current;
}
box.onmouseout = function() {
  current = colors[current];
  box.style.backgroundColor = "";
}
#box {
  width: 30%;
  height: 300px;
  margin: 0 auto;
  border: 2px solid #000;
  background-color: rgb(163, 0, 109);
}
<div id="box">

</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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