javascript - 在交替点击时在 2 种颜色之间切换 div 的背景颜色

Question

我有一个 ID 为“box”的 div。它的初始背景颜色设置为 #ff7700。我想创建一个函数“function1()”来执行以下操作:

• 第一次点击:将背景颜色更改为#ff0077
• 第二次点击:将背景色改回#ff7700
• 第三次点击:将背景颜色更改为#ff0077
• 第四次点击:将背景色改回#ff7700，依此类推。

代码:

<style>
    #box{
    background-color: #ff7700;
    cursor: pointer;
}    
</style>

<div id="box" onClick="function1()" > Inner HTML</div>

我尝试编写一个函数，但它不起作用。

<script>
    function function1(){
        var check = document.getElementById("box").style;
        check2=check.backgroundColor;
        if (check2 != "#ff0077"){
            check2="#ff7700";
            } else {
               check2="#ff0077";
            }
       }
</script>

请告知任何其他方法。我想坚持使用核心 JS 而不是使用 Jquery。

Answer 1

最好使用 bool 值作为切换:

var div = document.getElementById("box"),
    toggle = false;
    
div.onclick = function() {
  toggle = !toggle;                                     // invert toggle
  div.style.background = toggle? "#ff0077": "#ff7700";  // change background color depending on the value of toggle
}

div.style.background = "#ff7700";                       // give the div an initial background

<div id="box">Inner HTML</div>