clearTimeout() doesn't work in javascript

Question

I'm trying to make a slider automatic and manual with radio buttons, but when i click on radio button 1, for example, my time doesn't reset.

For example, if i'm now on button 3, and i have only 1 second until button 4, but i click on button 1, i have only 1 second until i get on button 2.

That's what i tried to do in javascript:

var bo;
var counter = 0;
function ro(){
    if(counter==0){
        bo=window.setTimeout(ro, 4000);
    }
    if(document.getElementById('radio1').checked==true){
        counter=1;
        window.clearTimeout(bo);
        bo=window.setTimeout(ro, 4000);
    }
    if(document.getElementById('radio2').checked==true){
        counter=2; 
        window.clearTimeout(bo);
        bo=window.setTimeout(ro, 4000);
    }
    if(document.getElementById('radio3').checked==true){
        counter=3;
        window.clearTimeout(bo);
        bo=window.setTimeout(ro, 4000);
    }
    if(document.getElementById('radio4').checked==true){
        counter=4;
        window.clearTimeout(bo); 
        bo=window.setTimeout(ro, 4000);  
    }
    if(counter==4){
        counter=0;
    }
    counter++;
    document.getElementById('radio' + counter).checked=true;
}

Someone told me that could be easier with jquery, but i'm trying to learn javascript, so if you can help me to resolve this in javascript, it will be awesome :)

I'm beginner, so any suggestion could help me very much. Thank you in advance!

Answer 1

Brother, I am seeing you are using the wrong variable bo. Shouldn't it be boss? Like the following?

var boss;
var counter = 0;
function ro(){
    if(counter==0){
        boss=window.setTimeout(ro, 4000);
    }
    if(document.getElementById('radio1').checked==true){
        counter=1;
        window.clearTimeout(boss);
        boss=window.setTimeout(ro, 4000);
    }
    if(document.getElementById('radio2').checked==true){
        counter=2; 
        window.clearTimeout(boss);
        boss=window.setTimeout(ro, 4000);
    }
    if(document.getElementById('radio3').checked==true){
        counter=3;
        window.clearTimeout(boss);
        boss=window.setTimeout(ro, 4000);
    }
    if(document.getElementById('radio4').checked==true){
        counter=4;
        window.clearTimeout(boss); 
        boss=window.setTimeout(ro, 4000);  
    }
    if(counter==4){
        counter=0;
    }
    counter++;
    document.getElementById('radio' + counter).checked=true;
}