I have created a switch in html using the code from w3schools. I want it to be preset to on or off randomly. How can i do that using javascript?

Question

I have created a toggle switch using the code given in w3schools. here is the link: https://www.w3schools.com/howto/howto_css_switch.asp. If you run my code the switch is preset to off. I want it to be preset to on or off randomly using pure javascript(No jQuery). Here is my code:

<html>
<head>
    <style>
        .music-switch {

position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.music-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

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

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

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

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

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
        </style>
<!-- define the toggle function -->
         <script language="javascript">

            function toggleState(item){
               if(item.className == "on") {
                  item.className="off";
                  document.getElementById("text").innerHTML = "Off";
               } else {
                  item.className="on";
                  document.getElementById("text").innerHTML = "On";
               }
            }

            function toggleState2(item){
               if(item.className == "on") {
                  item.className="off";
                  document.getElementById("text2").innerHTML = "Off";
               } else {
                  item.className="on";
                  document.getElementById("text2").innerHTML = "On";
               }
            }

            document.getElementById("btn").checked = true;
            document.getElementById("btn2").checked = true;
         </script>
      </head>
    

    <body>
      <div id="settings">
        <p>Music<label class="music-switch" onclick="switched(this)">
          <input type="checkbox" id="btn" value="button" class="off" onclick="toggleState(this)">
          <span class="slider round"></span>
        </label>
        </p>
        <label id="text"></label>
        <p>Sound
          <label class="music-switch" onclick="switched(this)">
          <input type="checkbox" id="btn2" value="button" class="off" onclick="toggleState2(this)">
          <span class="slider round"></span>
        </label>
        </p>
        <label id="text2"></label>
      </div>
    </body>
</html>

It seems that by setting the checked property of the checkbox to true it does not work. I have also tried setting the checked property of the checkbox to "checked".

score 0 · Answer 1 · answered Jul 14 '21 at 11:43

To avoid creating code for you, because that's not what learning is about

Think about what you need to achieve your goal, you've already really described the algorithm for that:

during initialization (how to detect when the page is loading? Tip)
run a function that sets checkbox to a given state

2.1 List of possible attributes for checkbox, you'll need "checked"

2.2 You know how to grab elements from DOM already :)

2.3 Set state for random state (element.checked = state)
randomize the state (true/false, how to make it random you have described here)

Yes i have done the steps that you have shown me but it is not working. step 2.3 is not working — Pratham, Jul 20 '21 at 06:27

I have created a switch in html using the code from w3schools. I want it to be preset to on or off randomly. How can i do that using javascript?

1 Answers1