在javascript中以时间间隔切换选中的复选框

Question

I'm a total noob at javascript and currently having issues with a project.

I'm trying to make a picture slide with specific transitions. The slide builds on and tags for the transition (check-boxes). I tried making a script that changes the checked box after every 5s.

I already got a good chunk of help from a friend but I can't get it to work at all.

This is the script:

   var slider_i = 1; 
   function slider_change(){
      if(++slider_i > 4){
         slider_i=1;
      } 
      document.getElementById('select-img-'+slider_i).checked = true;         
      setTimeout(slider_change, 5000);
   } 
   slider_change();

Here is the slider I'm talking about: http://demo.br-photography.ch/Portal/transitions/index_3.html

I made a jsfiddle, easier to test cause then we can see if the checkboxes without the css properties actually switch. They do, but my slide on the testsite is not switching the images as it should...?

https://jsfiddle.net/t4eapmgb/

Answer 1

try:

   var slider_i = 0;    // !!!
   var slider_change = function (){
      if(++slider_i > 4){
         slider_i=0;
      } 
      document.getElementById('select-img-'+slider_i).checked = true;         
      setTimeout(slider_change, 50000);
   };
   slider_change();

or

   var slider_i = 1;    
   var slider_change = function (){
      if(slider_i++ > 3){ // !!!
         slider_i=1;
      } 
      document.getElementById('select-img-'+slider_i).checked = true;         
      setTimeout(slider_change, 50000);
   };
   slider_change();

what's actually happening with your code:

• slider_i is set to 1.
• function slider_change is called
• it first increments the slider_i because of ++slider_i
• now slider_i has the value of 2
• it now checks against <4
• if not true, it checks an element with id select-img-<value of slider_i >

The last step generates the id of select-img-2 .

select-img-1 will never be reached. I don't know whether this is causing any subsequent errors.

Answer 2

For your information, setTimeout(, 50000) is triggerd after 50000 ms = 50sec. If you want to wait 5 sec you have to write setTimeout(, 5000)

Answer 3

Just place script from top to bottom. There is reference error because elements(checkboxes) are not available when initially page is loaded.

Or you may also add try catch block for this issue as follows:

replace this

var slider_i = 1; 
function slider_change(){
 if(++slider_i > 4){
   slider_i=1;
 } 
 document.getElementById('select-img-'+slider_i).checked = true;         
 setTimeout(slider_change, 5000);
} 
slider_change();

With this one:-

var slider_i = 1; 
function slider_change(){
  if(++slider_i > 4){
    slider_i=1;
  } 
  try{
    document.getElementById('select-img-'+slider_i).checked = true;         
  }catch(err){}
  setTimeout(slider_change, 5000);
} 
slider_change();

Answer 4

Use

//Repeats forever
var variable = setInterval(functionYouWantToCall, 5000);
//Cancel the interval
clearInterval(variable);