Javascript - Изменение цвета div на основе текущего цвета

Question

Я пытаюсь изменить цвет фона div на основе его текущего цвета, одним нажатием кнопки.

Например, если цвет голубой (# 00ffff - он должен измениться на желтый ('FFFF00)

Если цвет желтый -. Он должен изменить цвет на пурпурный (# FF00FF)

. Если цвет пурпурный - он должен вернуться обратно к голубому.

Мне удалось изменить цвет на желтый с голубой, но я точно не знаю, как написать оператор if if (предполагая, что оператор if - лучший способ ?) для изменения цветов на основе текущего цвета.

function ColorFunction() { 
 
    if (light.getItem("backgroundColor") == '#00ffff') { 
 
    document.getElementById("light").style.backgroundColor = "#ffff00"; 
 
    } 
 
    else 
 
    if (light.getItem("backgroundColor") == '#ffff00') { 
 
     document.getElementById("light").style.backgroundColor = "#ff00ff"; 
 
    } 
 
    else 
 
    if (light.getItem("backgroundColor") == '#ff00ff') { 
 
     document.getElementById("light").style.backgroundColor = "00ffff"; 
 
    } 
 
}

.main { 
 
    width:250px; 
 
    color: #202020; 
 
    background-color: #d0d0d0; 
 
} 
 

 
.light { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #00ffff 
 
} 
 

 
#burn { 
 
    width: 150px; 
 
    font-style: italic; 
 
} 
 

 
#button { 
 
    font-style: bold; 
 
    width: 150px; 
 
}

<h1>Disco Inferno</h1> 
 
    <div class="light" id="light"> 
 
     div 
 
    </div> 
 

 
    <button onClick="ColorFunction()">Burn!</button>

Answer 1

Хорошо, давайте начнем с самого начала здесь.

У вас есть элемент с идентификатором light, но это автоматически не станет переменной, которую вы можете использовать в javascript. Его достаточно легко сделать его одним:

var light = document.getElementById("light"); 

Тогда, я даже не уверен, где вы получаете getItem от - возможно, это предположение - но не достоверный метод на HTMLElement

Вы могли бы сделайте это с light.style.backgroundColor - см. фрагмент ниже.

var colors = ["rgb(0, 255, 255)","rgb(255, 255, 0)","rgb(255, 0, 255)"]; 
 

 
function ColorFunction() { 
 
    var light = document.getElementById("light"); 
 
    var curr = light.style.backgroundColor; 
 
    var next = colors.indexOf(curr)+1; 
 
    light.style.backgroundColor = colors[next%colors.length]; 
 
}

<h1>Disco Inferno</h1> 
 
<div class="light" id="light" style="background-color:#00FFFF"> 
 
    Burn, baby burn! 
 
</div> 
 

 
    <button onClick="ColorFunction()">Burn!</button>

Answer 2

Вы можете использовать объект для смещения цвета, после назначения непосредственно цвета на дела.

function ColorFunction() { 
 
    var colors = { 
 
      'rgb(0, 255, 255)': 'rgb(255, 255, 0)', 
 
      'rgb(255, 255, 0)': 'rgb(255, 0, 255)', 
 
      'rgb(255, 0, 255)': 'rgb(0, 255, 255)' 
 
     }, 
 
     element = document.getElementById("light"); 
 
    element.style.backgroundColor = colors[element.style.backgroundColor]; 
 
}

.main { width:250px; color: #202020; background-color: #d0d0d0; } 
 
.light { width: 50px; height: 50px; background-color: #00ffff; } 
 
#burn { width: 150px; font-style: italic; } 
 
#button { font-style: bold; width: 150px; }

<div class="light" id="light" style="background-color: #00ffff;"></div> 
 
<button onClick="ColorFunction()">Burn!</button>

Answer 3

Там нет GetItem(), что некоторые из выше метод. Посмотрите на консоль, и вы увидите, что это ошибка. Чтобы прочитать фоновый цвет, вы должны использовать стиль.

var color = elementReference.style.backgroundColor 

Теперь вы полагаетесь на плохой особенность JavaScript, где вы определяете переменную, которая соответствует идентификатор элемента, и это волшебно ссылка на этот element.You не следует этого делать. Вы должны определить переменную самостоятельно.

var elementReference = document.getElementById("light"); 

Теперь кикер, браузеры, возвращающие разные вещи, когда вы читаете значения цвета. SOme hex, некоторый rgb. Поэтому проверка цвета - это плохая вещь. Что делать? Используйте классы CSS.

function ColorFunction(){ 
 
    var elem = document.getElementById("light"); 
 
    if(elem.classList.contains("red")) { 
 
    elem.classList.remove("red"); 
 
    elem.classList.add("blue"); 
 
    } else if(elem.classList.contains("blue")) { 
 
    elem.classList.remove("blue"); 
 
    elem.classList.add("green"); 
 
    } else { 
 
    elem.classList.remove("green"); 
 
    elem.classList.add("red");  
 
    } 
 
}

.red { background-color: red;} 
 
.blue {background-color: blue;} 
 
.green {background-color: green;}

<h1>Disco Inferno</h1> 
 
<div class="light red" id="light"> 
 
    div 
 
</div> 
 

 
<button onClick="ColorFunction()">Burn!</button>

Теперь есть и другие способы, чтобы сделать, если чек с добавить/удалить, но это основная идея.