When mySwitch is untoggled/unchecked, the toggle/checked no longer works, doesn't change my bac-CodePudding

I have 2 toggle switches, the problem I have is sperating each toggle switches to do their own thing. I'm unable to, in javascript, to make a if/else statement for my 2nd toggle switch.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asignment 3</title>
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/136/136724.png" type="image/x-icon">

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>

<div id="RainbowId">


<div id="mySidebar" >
<a  onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a><label ><input type="checkbox"><div ><div id="text">OFF</div></div></label></a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a><label ><input type="checkbox2"><div ><div id="text2">OFF</div></div></label></a>
</div>


<button  id="openBtnId" onclick="openNav()">⚙️</button>  


</div>
</body>
</html>

the first if statement for the frist switch works but when I copy the code i couldn't make an ID for the CHECKBOX for javascript and CSS.

function openNav() {
    document.getElementById("mySidebar").style.width = "250px"; 
}

function closeNav() {
    document.getElementById("mySidebar").style.width = "0";
}


document.addEventListener('DOMContentLoaded', function () {
    var checkbox = document.querySelector('input[type="checkbox"]');
    
  checkbox.addEventListener('change', function () {
    if (checkbox.checked) {
        RainbowId.classList.toggle('Rainbow');
        document.getElementById('text').innerHTML = 'ON'; 
    }
    else {
        RainbowId.classList.toggle("Rainbow");
        document.getElementById('text').innerHTML = 'OFF';
    }
  });
});

I gave the 2nd switch its own classes but couldn't give the CHECKBOX its own class.

/* Rainbow background*/
.Rainbow { 
    height: 100%;
    width: 100%;
    left:0;         
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
    position: absolute;
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 3s ease infinite;
    animation: rainbow 3s ease infinite;
}

@keyFrames rainbow {
    0%{background-position:0% 82%}
    25%{background-position: 50% 9.5%}
    50%{background-position:100% 19%}
    75%{background-position: 75% 41%}
    100%{background-position:0% 82%}
}

/* Sidebar Styles */
.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background: grey;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    overflow-x: hidden;
    transition: 1s;
}

.sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    white-space: nowrap;
    transition: 0.3s;
}

.closebtn {
    cursor: pointer;
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 40px;
}

.openbtn {
    font-size: 40px;
    cursor: pointer;
    border: none;
    background: none;
}

.openbtn:hover {
    opacity: 50%;
}

br {
    user-select: none;
}

/* Toggle Switch Styles */
.switch {
    position: absolute;
    width: 60px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.switch input {
    display:none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked   .slider {
    background-color: #2196F3;
}

input:focus   .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked   .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.switch #text {
    user-select: none;
    position: absolute;
    left: 60px;
    margin-left: 10px;
}

/*Toogle Switch 2*/
.switch2 {
    position: absolute;
    width: 60px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.switch2 input {
    display:none;
}

.slider2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider2:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked   .slider2 {
    background-color: #2196F3;
}

input:focus   .slider2 {
    box-shadow: 0 0 1px #2196F3;
}

input:checked   .slider2:before {
    transform: translateX(26px);
}

.slider2.round2 {
    border-radius: 34px;
}

.slider2.round2:before {
    border-radius: 50%;
}

.switch2 #text2 {
    user-select: none;
    position: absolute;
    left: 60px;
    margin-left: 10px;
}

CodePudding user response：

Change your code as follows - use querySelectorAll to find all .checkbox

You'll see that both id="text" (and text2) are now this is important, since we can get the parent of the clicked checkbox and use querySelector to find the appropriate text

document.addEventListener('DOMContentLoaded', function() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      checkbox.parentElement.querySelector('.text').innerHTML = 
        checkbox.checked ? 'ON' : 'OFF';
      if (this.dataset.action === 'rainbow') {
        RainbowId.classList.toggle('Rainbow');
      } else {
        console.log('DO NOT TOUCH as TOUCHED');
      }
    });
  });
});

I also tidied the code a bit to be more DRY

And your html - I've put line breaks in to make it readable, but I know that may cause issues, but at least you can see easily what has changed

<div id="RainbowId">
  <div id="mySidebar" >
    <a  onclick="closeNav()">×</a>
    <a>RAINBOW MODE</a>
    <a>
      <label >
        <input type="checkbox" data-action="rainbow">
        <div >
          <!-- added class here -->
          <div id="text" >OFF</div>
        </div>
      </label>
    </a>
    <a><br></a>
    <a><br></a>
    <a>DO NOT TOUCH</a>
    <a>
      <label >
        <input type="checkbox" data-action="not a rainbow">
        <div >
          <!-- added class here -->
          <div id="text2" >OFF</div>
        </div>
      </label>
    </a>
  </div>
  <button  id="openBtnId" onclick="openNav()">⚙️</button>
</div>