Change div color back to normal on seperate div click-CodePudding

I'm experiencing the issue of being unable to change the div color back to it's original color using JS. The same format of JS works well for other functions, such as moving divs around and showing/hiding other divs. However, when i try to include the changing of colors, it doesn't work.

below is my JS code, the issue lies under the "sidebar" ("div2"):

var button = document.getElementById("id_switch");
var div2 = document.getElementById("id_sidebar");
var div = document.getElementById("id_button_switch");
var div3 = document.getElementById("id_sun_icon");
var div4 = document.getElementById("id_lightMode");
var div5 = document.getElementById("id_moon_icon");
var div6 = document.getElementById("id_darkMode");

button.addEventListener("click", function() {
  if (div.style.marginLeft === "20px") {
    div.style.marginLeft = "2.5px";
  } else {
    div.style.marginLeft = "20px";
  };
});
button.addEventListener("click", function() {
  if (div2.style.backgroundColor === "#012342") {
    div2.style.backgroundColor = "#202023";
  } else {
    div2.style.backgroundColor = "#012342";
  };
});
button.addEventListener("click", function() {
  if (div3.style.display === "flex") {
    div3.style.display = "none";
  } else {
    div3.style.display = "flex";
  };
});
button.addEventListener("click", function() {
  if (div5.style.display === "none") {
    div5.style.display = "flex";
  } else {
    div5.style.display = "none";
  };
});
button.addEventListener("click", function() {
  if (div4.style.display === "flex") {
    div4.style.display = "none";
  } else {
    div4.style.display = "flex";
  };
});
button.addEventListener("click", function() {
  if (div6.style.display === "none") {
    div6.style.display = "flex";
  } else {
    div6.style.display = "none";
  };
});

I have included a JSFiddle version to view the full thing: https://jsfiddle.net/sya1r8x6/

CodePudding user response：

the div2.style.backgroundColor returns an rgb color a simple solution would be to just replace #012342 to rgb(1, 35, 66)

var button = document.getElementById("id_switch");
var div2 = document.getElementById("id_sidebar");
var div = document.getElementById("id_button_switch");
var div3 = document.getElementById("id_sun_icon");
var div4 = document.getElementById("id_lightMode");
var div5 = document.getElementById("id_moon_icon");
var div6 = document.getElementById("id_darkMode");

button.addEventListener("click", function() {
  if (div.style.marginLeft === "20px") {
    div.style.marginLeft = "2.5px";
  } else {
    div.style.marginLeft = "20px";
  };
});
button.addEventListener("click", function() {
console.log(div2.style.backgroundColor);
  if (div2.style.backgroundColor === "rgb(1, 35, 66)") {//here is the change
    div2.style.backgroundColor = "#202023";
  } else {
    div2.style.backgroundColor = "#012342";
  };
});
button.addEventListener("click", function() {
  if (div3.style.display === "flex") {
    div3.style.display = "none";
  } else {
    div3.style.display = "flex";
  };
});
button.addEventListener("click", function() {
  if (div5.style.display === "none") {
    div5.style.display = "flex";
  } else {
    div5.style.display = "none";
  };
});
button.addEventListener("click", function() {
  if (div4.style.display === "flex") {
    div4.style.display = "none";
  } else {
    div4.style.display = "flex";
  };
});
button.addEventListener("click", function() {
  if (div6.style.display === "none") {
    div6.style.display = "flex";
  } else {
    div6.style.display = "none";
  };
});

/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
/*---------------------------------------------------------------------------------------------*/
body{
    min-height: 100vh;
    /*background-color: rgb(30, 29, 29)*/;
    background-color: #000000;
    transition: var(--tran-05);
}

/*----------------------------------SIDE BAR--------------------------------*/
 .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 19%;
    padding: 10px 14px;
    background-color: #202023;
    transition: var(--tran-05);
    z-index: 100;
}
/*----------------------------------SIDEBAR HEADER--------------------------------*/
.sidebar li{
    height: 50px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
}

.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sidebar .text,
.sidebar .icon{
    color: #FFF;
    transition: var(--tran-03);
}

.sidebar .text{
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
}
.sidebar .menu{
    margin-top: 40px;
}
.sidebar li a{
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    text-decoration: none;
    transition: var(--tran-03);
}
.sidebar .menu-bar{
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
}
.mode{
    background-color: #303034;
    position: relative;
    transition: var(--tran-05);
}
.sun-moon i.sun,
.mode-textL{
    display: none;
}
.toggle-switch{
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
    cursor: pointer;
}
.switch{
    position: relative;
    height: 22px;
    width: 40px;
    border-radius: 0px;
    background-color: #000000;
    transition: var(--tran-05);
}
.button_switch{
    background-color: #FFF;
    position: relative;
    padding: 1px;
    height: 70%;
    width: 40%;
    margin-top: 2.5px;
    margin-left: 2px;
}
/*-----------------------------------------------------------*/
.home{
    position: absolute;
    top: 0;
    top: 0;
    left: 250px;
    height: 100vh;
    width: calc(100% - 250px);
    background-color: var(--body-color);
    transition: var(--tran-05);
}
.home .text{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 12px 60px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!----======== CSS ======== -->
    <link rel="stylesheet" href="stackoverflowExample.css">
    
    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" charset="UTF-8"></script>
    <!--<title>Dashboard Sidebar Menu</title>--> 
</head>
<body>
    <nav  id="id_sidebar">
            <div >
                <li >
                    <a href="#">
                        <i class='bx bx-log-out icon' ></i>
                        <span >Logout</span>
                    </a>
                </li>

                <li >
                    <div >
                        <i class='bx bx-moon icon moon' id="id_moon_icon"></i>
                        <i class='bx bx-sun icon sun' id="id_sun_icon"></i>
                    </div>
                    <div  id="id_darkMode">Dark mode</div>
                    <div  id="id_lightMode">Light mode</div>

                    <div  id="id_toggle-switch">
                        <div  id="id_switch">
                            <div  id="id_button_switch"></div>
                        </div>
                    </div>
                </li>
                
            </div>
        </div>

    </nav>
    <script src="sidebar.js"></script>



</body>

CodePudding user response：

try rgba(0,0,0,0); this gives your element no background at all(the ori