Change div color back to normal on seperate div click

January 21, 2023

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/

>Solution :

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/boxicons@2.1.1/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 class="sidebar" id="id_sidebar">
            <div class="bottom-content">
                <li class="">
                    <a href="#">
                        <i class='bx bx-log-out icon' ></i>
                        <span class="text nav-text">Logout</span>
                    </a>
                </li>

                <li class="mode">
                    <div class="sun-moon">
                        <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 class="mode-text text" id="id_darkMode">Dark mode</div>
                    <div class="mode-textL text" id="id_lightMode">Light mode</div>

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

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



</body>