Toggle between HTML pages using flipswitch

Question

I have two separate html pages that I wish to toggle using a flip-switch.

The switch is "Off" by default and shows the current html page, index.html . When the user flips it to "On", I want to redirect them to nextpage.html . Similarly, if the user flips it "Off", they are redirected to index.html . I tried to experiment by including onclick="index.html" within the codes but it does not work.

Do I need a function to achieve this?

Flipswitch

<div class= "switch">
   <label for="title"><b>Switch to redirect:</b>
   <input type="checkbox" data-role="flipswitch" name="switch" id="switch"></label>
</div>

Answer 1

Since its a checkbox you can addEventListener onchange :

HTML: (index.html)

<div class= "switch">
 <label for="title"><b>Switch to redirect:</b>
   <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
 </label>
</div>

HTML: (nextpage.html)

<div class= "switch">
 <label for="title"><b>Switch to redirect:</b>
   <input type="checkbox" checked="checked" data-role="flipswitch" name="switch" id="switch">
 </label>
</div>

JavaScript:

document.getElementById('switch').onchange = function(){
  if(this.checked){
   window.location='nextpage.html';
  } else {
   window.location='index.html';
  }
};

Answer 2

使用它作为您的onclick：

onclick="window.location='index.html'"