Settime out messing with onclick event in javascript

-1

im trying to create a automatic image slider which also responds to an onclick function, for some odd reason the onclick event is pretty much doing nothinig i suspect its cause of the settime out as javascript is single threaded but im no master at javascript! could someone please tell me what i'm doing wrong stuck with this for the past two days! thank you!

var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;







starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";









var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);



function rightbuttonclick()

{

eventaction=1;

clearTimeout(timeoutId);

}



function leftbuttonclick()

{

eventaction=2;

clearTimeout(timeoutId);

}



function changeImg(){

  

  document.getElementById('startersliders').src = starterimages[i];



  if(eventaction==1)

  {

    i++;

    if(i < starterimages.length - 1) 

    {document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;}

    else

    {

      i=0;

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

    

  }

  else if(eventaction==2)

  {

    i--;

     if(i== - 1) 

     {

       i=3;

        document.getElementById('startersliders').src = starterimages[i];

     eventaction=0;

     }

     else

    {

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

  }

  else if(eventaction==0){

  if(i < starterimages.length - 1){

    

    i++; 

  } 

  else { 

  

    i = 0;

  }

  }



  // Run function every x seconds

timeoutId = setTimeout("changeImg()", time);

}





// Run function when page loads

window.onload=changeImg;

#staratersliders {

  width: 10%;

  height: 10%;

  position: relative;

  margin: 0% 0% 0% 0%;

}

<button class="button button3" id="leftbutton"> previous</button>

<img id="startersliders" />



<button class="button button3" id="rightbutton">next</button>

edited Nov 15 '18 at 2:54

asked Nov 15 '18 at 2:13

Faizal Mohaideen Kadersha

176

Hi, and thanks for posting on SO! For starters, you're improperly using clearTimeout. clearTimeout takes an ID value that is returned by the setTimeout call. So, you need to do something like var timeoutId; ... timeoutId = setTimeout("changeImg()", time); ... clearTimeout(timeoutId)

– Matthew Herbst
Nov 15 '18 at 2:26

@MatthewHerbst i edited the code as you said still not working :(

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:56

add a comment |

-1

var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;







starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";









var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);



function rightbuttonclick()

{

eventaction=1;

clearTimeout(timeoutId);

}



function leftbuttonclick()

{

eventaction=2;

clearTimeout(timeoutId);

}



function changeImg(){

  

  document.getElementById('startersliders').src = starterimages[i];



  if(eventaction==1)

  {

    i++;

    if(i < starterimages.length - 1) 

    {document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;}

    else

    {

      i=0;

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

    

  }

  else if(eventaction==2)

  {

    i--;

     if(i== - 1) 

     {

       i=3;

        document.getElementById('startersliders').src = starterimages[i];

     eventaction=0;

     }

     else

    {

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

  }

  else if(eventaction==0){

  if(i < starterimages.length - 1){

    

    i++; 

  } 

  else { 

  

    i = 0;

  }

  }



  // Run function every x seconds

timeoutId = setTimeout("changeImg()", time);

}





// Run function when page loads

window.onload=changeImg;

#staratersliders {

  width: 10%;

  height: 10%;

  position: relative;

  margin: 0% 0% 0% 0%;

}

<button class="button button3" id="leftbutton"> previous</button>

<img id="startersliders" />



<button class="button button3" id="rightbutton">next</button>

edited Nov 15 '18 at 2:54

asked Nov 15 '18 at 2:13

Faizal Mohaideen Kadersha

176

Hi, and thanks for posting on SO! For starters, you're improperly using clearTimeout. clearTimeout takes an ID value that is returned by the setTimeout call. So, you need to do something like var timeoutId; ... timeoutId = setTimeout("changeImg()", time); ... clearTimeout(timeoutId)

– Matthew Herbst
Nov 15 '18 at 2:26

@MatthewHerbst i edited the code as you said still not working :(

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:56

add a comment |

-1

var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;







starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";









var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);



function rightbuttonclick()

{

eventaction=1;

clearTimeout(timeoutId);

}



function leftbuttonclick()

{

eventaction=2;

clearTimeout(timeoutId);

}



function changeImg(){

  

  document.getElementById('startersliders').src = starterimages[i];



  if(eventaction==1)

  {

    i++;

    if(i < starterimages.length - 1) 

    {document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;}

    else

    {

      i=0;

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

    

  }

  else if(eventaction==2)

  {

    i--;

     if(i== - 1) 

     {

       i=3;

        document.getElementById('startersliders').src = starterimages[i];

     eventaction=0;

     }

     else

    {

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

  }

  else if(eventaction==0){

  if(i < starterimages.length - 1){

    

    i++; 

  } 

  else { 

  

    i = 0;

  }

  }



  // Run function every x seconds

timeoutId = setTimeout("changeImg()", time);

}





// Run function when page loads

window.onload=changeImg;

#staratersliders {

  width: 10%;

  height: 10%;

  position: relative;

  margin: 0% 0% 0% 0%;

}

<button class="button button3" id="leftbutton"> previous</button>

<img id="startersliders" />



<button class="button button3" id="rightbutton">next</button>

edited Nov 15 '18 at 2:54

asked Nov 15 '18 at 2:13

Faizal Mohaideen Kadersha

176

var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;







starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";









var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);



function rightbuttonclick()

{

eventaction=1;

clearTimeout(timeoutId);

}



function leftbuttonclick()

{

eventaction=2;

clearTimeout(timeoutId);

}



function changeImg(){

  

  document.getElementById('startersliders').src = starterimages[i];



  if(eventaction==1)

  {

    i++;

    if(i < starterimages.length - 1) 

    {document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;}

    else

    {

      i=0;

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

    

  }

  else if(eventaction==2)

  {

    i--;

     if(i== - 1) 

     {

       i=3;

        document.getElementById('startersliders').src = starterimages[i];

     eventaction=0;

     }

     else

    {

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

  }

  else if(eventaction==0){

  if(i < starterimages.length - 1){

    

    i++; 

  } 

  else { 

  

    i = 0;

  }

  }



  // Run function every x seconds

timeoutId = setTimeout("changeImg()", time);

}





// Run function when page loads

window.onload=changeImg;

#staratersliders {

  width: 10%;

  height: 10%;

  position: relative;

  margin: 0% 0% 0% 0%;

}

<button class="button button3" id="leftbutton"> previous</button>

<img id="startersliders" />



<button class="button button3" id="rightbutton">next</button>

var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;







starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";









var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);



function rightbuttonclick()

{

eventaction=1;

clearTimeout(timeoutId);

}



function leftbuttonclick()

{

eventaction=2;

clearTimeout(timeoutId);

}



function changeImg(){

  

  document.getElementById('startersliders').src = starterimages[i];



  if(eventaction==1)

  {

    i++;

    if(i < starterimages.length - 1) 

    {document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;}

    else

    {

      i=0;

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

    

  }

  else if(eventaction==2)

  {

    i--;

     if(i== - 1) 

     {

       i=3;

        document.getElementById('startersliders').src = starterimages[i];

     eventaction=0;

     }

     else

    {

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

  }

  else if(eventaction==0){

  if(i < starterimages.length - 1){

    

    i++; 

  } 

  else { 

  

    i = 0;

  }

  }



  // Run function every x seconds

timeoutId = setTimeout("changeImg()", time);

}





// Run function when page loads

window.onload=changeImg;

#staratersliders {

  width: 10%;

  height: 10%;

  position: relative;

  margin: 0% 0% 0% 0%;

}

<button class="button button3" id="leftbutton"> previous</button>

<img id="startersliders" />



<button class="button button3" id="rightbutton">next</button>

var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;







starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";









var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);



function rightbuttonclick()

{

eventaction=1;

clearTimeout(timeoutId);

}



function leftbuttonclick()

{

eventaction=2;

clearTimeout(timeoutId);

}



function changeImg(){

  

  document.getElementById('startersliders').src = starterimages[i];



  if(eventaction==1)

  {

    i++;

    if(i < starterimages.length - 1) 

    {document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;}

    else

    {

      i=0;

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

    

  }

  else if(eventaction==2)

  {

    i--;

     if(i== - 1) 

     {

       i=3;

        document.getElementById('startersliders').src = starterimages[i];

     eventaction=0;

     }

     else

    {

      document.getElementById('startersliders').src = starterimages[i];

    eventaction=0;

    }

  }

  else if(eventaction==0){

  if(i < starterimages.length - 1){

    

    i++; 

  } 

  else { 

  

    i = 0;

  }

  }



  // Run function every x seconds

timeoutId = setTimeout("changeImg()", time);

}





// Run function when page loads

window.onload=changeImg;

#staratersliders {

  width: 10%;

  height: 10%;

  position: relative;

  margin: 0% 0% 0% 0%;

}

<button class="button button3" id="leftbutton"> previous</button>

<img id="startersliders" />



<button class="button button3" id="rightbutton">next</button>

javascript jquery html css

edited Nov 15 '18 at 2:54

asked Nov 15 '18 at 2:13

Faizal Mohaideen Kadersha

176

edited Nov 15 '18 at 2:54

asked Nov 15 '18 at 2:13

Faizal Mohaideen Kadersha

176

edited Nov 15 '18 at 2:54

asked Nov 15 '18 at 2:13

Faizal Mohaideen Kadersha

176

asked Nov 15 '18 at 2:13

Faizal Mohaideen Kadersha

176

asked Nov 15 '18 at 2:13

Faizal Mohaideen Kadersha

176

Hi, and thanks for posting on SO! For starters, you're improperly using clearTimeout. clearTimeout takes an ID value that is returned by the setTimeout call. So, you need to do something like var timeoutId; ... timeoutId = setTimeout("changeImg()", time); ... clearTimeout(timeoutId)

– Matthew Herbst
Nov 15 '18 at 2:26

@MatthewHerbst i edited the code as you said still not working :(

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:56

add a comment |

Hi, and thanks for posting on SO! For starters, you're improperly using clearTimeout. clearTimeout takes an ID value that is returned by the setTimeout call. So, you need to do something like var timeoutId; ... timeoutId = setTimeout("changeImg()", time); ... clearTimeout(timeoutId)

– Matthew Herbst
Nov 15 '18 at 2:26

@MatthewHerbst i edited the code as you said still not working :(

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:56

Hi, and thanks for posting on SO! For starters, you're improperly using clearTimeout. clearTimeout takes an ID value that is returned by the setTimeout call. So, you need to do something like var timeoutId; ... timeoutId = setTimeout("changeImg()", time); ... clearTimeout(timeoutId)

– Matthew Herbst
Nov 15 '18 at 2:26

@MatthewHerbst i edited the code as you said still not working :(

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:56

add a comment |

3 Answers
3

active

oldest

votes

I got it all working in Firefox 51, buttons included. Just paste the whole thing in a blank page and save it with an .htm or .html extension.

<!DOCTYPE=HTML><html><meta charset="UTF-8">

<script>



var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;



starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";



function rightbuttonclick() {

  eventaction = 1;

  clearTimeout(timeoutId);

  changeImg();

}



function leftbuttonclick() {

  eventaction = 2;

  clearTimeout(timeoutId);

  changeImg();

}



function changeImg() {

  if (eventaction == 1) {

    if (i < starterimages.length - 1) {

      i++;

      document.getElementById('startersliders').src=starterimages[i];  

      eventaction = 0;

    } else { 

      i = 0;

      document.getElementById('startersliders').src=starterimages[i];

      eventaction = 0;

    }

  } else if (eventaction == 2) {

    i--;

    if (i < 0) {

      i = 2;

      document.getElementById('startersliders').src=starterimages[i]; 

      eventaction = 0;

    } else {

      document.getElementById('startersliders').src=starterimages[i];

      eventaction = 0;

    }

  } else {

    if (i < starterimages.length - 1) {

      i++;

    } else {

      i = 0;

    };



    document.getElementById('startersliders').src=starterimages[i];

    eventaction = 0;

  } 



  timeoutId=setTimeout("changeImg()", time);

}

</script>



<style>

#startersliders {width: 10%;height: 10%;position: relative;margin: 0% 0% 0% 0%;}

</style>



<body onload="changeImg();">



<button class="button button3" id="leftbutton">previous</button>

<img id="startersliders">

<button class="button button3" id="rightbutton">next</button>



<script>

var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

prevbutton.addEventListener("click",leftbuttonclick);

</script>



</body>

</html>

edited Nov 17 '18 at 0:35

Matthew Herbst

10.9k134688

answered Nov 15 '18 at 6:54

Ed Would

364

Note that there is a bug in this code - and extra ;. I pointed it out in the code which I have now formatted.

– Matthew Herbst
Nov 16 '18 at 8:53

That's an 'unnecessary' semi-colon. It will flag as such in a js tester but it's not a 'bug' that will break the code. I just use it so I can spot the end of a large multi-level if statement more easily.

– Ed Would
Nov 16 '18 at 14:41

It also helps avoid cut and paste errors if a line break is removed and the following statement ends up on the same line by mistake. This seems to be a pretty good reference.codecademy.com/en/forum_questions/507f6dd09266b70200000d7e

– Ed Would
Nov 16 '18 at 14:58

Good callout and sorry about that - I wasn't paying enough attention to where it was.

– Matthew Herbst
Nov 17 '18 at 0:36

add a comment |

It won't work because this:

setTimeout("changeImg()", time);

Is invalid syntax for setTimeout. To fix it, just do this:

setTimeout(changeImg, time);

answered Nov 15 '18 at 2:26

Jack Bashford

9,53131540

no, it's not invalid syntax at all

– Bravo
Nov 15 '18 at 2:32

Really? I thought it was invalid...

– Jack Bashford
Nov 15 '18 at 2:33

It does really look invalid, but unfortunately, it's not, setTimeout also accepts essentially eval strings as well

– CertainPerformance
Nov 15 '18 at 3:35

add a comment |

var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);

I copy/pasted the code into my machine and the above came up null because they need to be between script tags at the bottom of the body of the doc.
When the parser sees those at the top, it doesn't know what #rightbutton and #leftbutton are because it hasn't parsed the html in the body section yet so it comes back as a null element

just move them to the bottom of the body section after the html and put script /script tags around them and see what happens

You need to do both of the above, what Matthew Herbst said is correct and what Jack Bashford said is correct. Create a variable for the setTimeout

var mytimeinverval;

var mytimer;

mytimer=setTimeout(myfunctionname,mytimeinterval);

The function name inside the setTimeout doesn't get quotes or parenthesis.
If you put parenthesis in, it might fire instantly or who knows?
It still recognizes myfunctionname as a function without the parenthesis.
Putting quotes around it makes it a string-won't work in my experience.
I don't want credit, they answered it, just letting you know to do both.

edited Nov 15 '18 at 4:50

answered Nov 15 '18 at 2:49

Ed Would

364

@i edited the code as mathew suggested still not working and settime out function accepts methods with paranthesis given or without paranthesis or with just function name that doesnot make any difference but still gave a try and results the same

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:57

I tested 4 permutations:

– Ed Would
Nov 15 '18 at 3:49

I tested 4 permutations:with quotes and parens-correct, quotes without parens-no fire,parens no quotes-fires instantly,no parens no quotes-correct so sorry, you're way with both works just like my way with neither. I'll look at it again but if you did the var mytimer=setTimeout as well then I'm stuck.

– Ed Would
Nov 15 '18 at 4:00

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53311461%2fsettime-out-messing-with-onclick-event-in-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

I got it all working in Firefox 51, buttons included. Just paste the whole thing in a blank page and save it with an .htm or .html extension.

<!DOCTYPE=HTML><html><meta charset="UTF-8">

<script>



var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;



starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";



function rightbuttonclick() {

  eventaction = 1;

  clearTimeout(timeoutId);

  changeImg();

}



function leftbuttonclick() {

  eventaction = 2;

  clearTimeout(timeoutId);

  changeImg();

}



function changeImg() {

  if (eventaction == 1) {

    if (i < starterimages.length - 1) {

      i++;

      document.getElementById('startersliders').src=starterimages[i];  

      eventaction = 0;

    } else { 

      i = 0;

      document.getElementById('startersliders').src=starterimages[i];

      eventaction = 0;

    }

  } else if (eventaction == 2) {

    i--;

    if (i < 0) {

      i = 2;

      document.getElementById('startersliders').src=starterimages[i]; 

      eventaction = 0;

    } else {

      document.getElementById('startersliders').src=starterimages[i];

      eventaction = 0;

    }

  } else {

    if (i < starterimages.length - 1) {

      i++;

    } else {

      i = 0;

    };



    document.getElementById('startersliders').src=starterimages[i];

    eventaction = 0;

  } 



  timeoutId=setTimeout("changeImg()", time);

}

</script>



<style>

#startersliders {width: 10%;height: 10%;position: relative;margin: 0% 0% 0% 0%;}

</style>



<body onload="changeImg();">



<button class="button button3" id="leftbutton">previous</button>

<img id="startersliders">

<button class="button button3" id="rightbutton">next</button>



<script>

var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

prevbutton.addEventListener("click",leftbuttonclick);

</script>



</body>

</html>

edited Nov 17 '18 at 0:35

Matthew Herbst

10.9k134688

answered Nov 15 '18 at 6:54

Ed Would

364

Note that there is a bug in this code - and extra ;. I pointed it out in the code which I have now formatted.

– Matthew Herbst
Nov 16 '18 at 8:53

That's an 'unnecessary' semi-colon. It will flag as such in a js tester but it's not a 'bug' that will break the code. I just use it so I can spot the end of a large multi-level if statement more easily.

– Ed Would
Nov 16 '18 at 14:41

It also helps avoid cut and paste errors if a line break is removed and the following statement ends up on the same line by mistake. This seems to be a pretty good reference.codecademy.com/en/forum_questions/507f6dd09266b70200000d7e

– Ed Would
Nov 16 '18 at 14:58

Good callout and sorry about that - I wasn't paying enough attention to where it was.

– Matthew Herbst
Nov 17 '18 at 0:36

add a comment |

I got it all working in Firefox 51, buttons included. Just paste the whole thing in a blank page and save it with an .htm or .html extension.

<!DOCTYPE=HTML><html><meta charset="UTF-8">

<script>



var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;



starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";



function rightbuttonclick() {

  eventaction = 1;

  clearTimeout(timeoutId);

  changeImg();

}



function leftbuttonclick() {

  eventaction = 2;

  clearTimeout(timeoutId);

  changeImg();

}



function changeImg() {

  if (eventaction == 1) {

    if (i < starterimages.length - 1) {

      i++;

      document.getElementById('startersliders').src=starterimages[i];  

      eventaction = 0;

    } else { 

      i = 0;

      document.getElementById('startersliders').src=starterimages[i];

      eventaction = 0;

    }

  } else if (eventaction == 2) {

    i--;

    if (i < 0) {

      i = 2;

      document.getElementById('startersliders').src=starterimages[i]; 

      eventaction = 0;

    } else {

      document.getElementById('startersliders').src=starterimages[i];

      eventaction = 0;

    }

  } else {

    if (i < starterimages.length - 1) {

      i++;

    } else {

      i = 0;

    };



    document.getElementById('startersliders').src=starterimages[i];

    eventaction = 0;

  } 



  timeoutId=setTimeout("changeImg()", time);

}

</script>



<style>

#startersliders {width: 10%;height: 10%;position: relative;margin: 0% 0% 0% 0%;}

</style>



<body onload="changeImg();">



<button class="button button3" id="leftbutton">previous</button>

<img id="startersliders">

<button class="button button3" id="rightbutton">next</button>



<script>

var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

prevbutton.addEventListener("click",leftbuttonclick);

</script>



</body>

</html>

edited Nov 17 '18 at 0:35

Matthew Herbst

10.9k134688

answered Nov 15 '18 at 6:54

Ed Would

364

Note that there is a bug in this code - and extra ;. I pointed it out in the code which I have now formatted.

– Matthew Herbst
Nov 16 '18 at 8:53

That's an 'unnecessary' semi-colon. It will flag as such in a js tester but it's not a 'bug' that will break the code. I just use it so I can spot the end of a large multi-level if statement more easily.

– Ed Would
Nov 16 '18 at 14:41

It also helps avoid cut and paste errors if a line break is removed and the following statement ends up on the same line by mistake. This seems to be a pretty good reference.codecademy.com/en/forum_questions/507f6dd09266b70200000d7e

– Ed Would
Nov 16 '18 at 14:58

Good callout and sorry about that - I wasn't paying enough attention to where it was.

– Matthew Herbst
Nov 17 '18 at 0:36

add a comment |

I got it all working in Firefox 51, buttons included. Just paste the whole thing in a blank page and save it with an .htm or .html extension.

<!DOCTYPE=HTML><html><meta charset="UTF-8">

<script>



var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;



starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";



function rightbuttonclick() {

  eventaction = 1;

  clearTimeout(timeoutId);

  changeImg();

}



function leftbuttonclick() {

  eventaction = 2;

  clearTimeout(timeoutId);

  changeImg();

}



function changeImg() {

  if (eventaction == 1) {

    if (i < starterimages.length - 1) {

      i++;

      document.getElementById('startersliders').src=starterimages[i];  

      eventaction = 0;

    } else { 

      i = 0;

      document.getElementById('startersliders').src=starterimages[i];

      eventaction = 0;

    }

  } else if (eventaction == 2) {

    i--;

    if (i < 0) {

      i = 2;

      document.getElementById('startersliders').src=starterimages[i]; 

      eventaction = 0;

    } else {

      document.getElementById('startersliders').src=starterimages[i];

      eventaction = 0;

    }

  } else {

    if (i < starterimages.length - 1) {

      i++;

    } else {

      i = 0;

    };



    document.getElementById('startersliders').src=starterimages[i];

    eventaction = 0;

  } 



  timeoutId=setTimeout("changeImg()", time);

}

</script>



<style>

#startersliders {width: 10%;height: 10%;position: relative;margin: 0% 0% 0% 0%;}

</style>



<body onload="changeImg();">



<button class="button button3" id="leftbutton">previous</button>

<img id="startersliders">

<button class="button button3" id="rightbutton">next</button>



<script>

var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

prevbutton.addEventListener("click",leftbuttonclick);

</script>



</body>

</html>

edited Nov 17 '18 at 0:35

Matthew Herbst

10.9k134688

answered Nov 15 '18 at 6:54

Ed Would

364

I got it all working in Firefox 51, buttons included. Just paste the whole thing in a blank page and save it with an .htm or .html extension.

<!DOCTYPE=HTML><html><meta charset="UTF-8">

<script>



var i = 0;      

var starterimages= ;

var time = 3000;  

var eventaction=0;

var timeoutId;



starterimages[0] = "https://i.pinimg.com/236x/f4/92/39/f492399e154bd9f564d7fc5299c19911--purple-rain-deep-purple.jpg";

starterimages[1] = "https://image.shutterstock.com/image-photo/purple-butterfly-isolated-on-white-260nw-44004850.jpg";

starterimages[2] = "https://www.birdscanada.org/images/inbu_norm_q_townsend.jpg";



function rightbuttonclick() {

  eventaction = 1;

  clearTimeout(timeoutId);

  changeImg();

}



function leftbuttonclick() {

  eventaction = 2;

  clearTimeout(timeoutId);

  changeImg();

}



function changeImg() {

  if (eventaction == 1) {

    if (i < starterimages.length - 1) {

      i++;

      document.getElementById('startersliders').src=starterimages[i];  

      eventaction = 0;

    } else { 

      i = 0;

      document.getElementById('startersliders').src=starterimages[i];

      eventaction = 0;

    }

  } else if (eventaction == 2) {

    i--;

    if (i < 0) {

      i = 2;

      document.getElementById('startersliders').src=starterimages[i]; 

      eventaction = 0;

    } else {

      document.getElementById('startersliders').src=starterimages[i];

      eventaction = 0;

    }

  } else {

    if (i < starterimages.length - 1) {

      i++;

    } else {

      i = 0;

    };



    document.getElementById('startersliders').src=starterimages[i];

    eventaction = 0;

  } 



  timeoutId=setTimeout("changeImg()", time);

}

</script>



<style>

#startersliders {width: 10%;height: 10%;position: relative;margin: 0% 0% 0% 0%;}

</style>



<body onload="changeImg();">



<button class="button button3" id="leftbutton">previous</button>

<img id="startersliders">

<button class="button button3" id="rightbutton">next</button>



<script>

var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

prevbutton.addEventListener("click",leftbuttonclick);

</script>



</body>

</html>

edited Nov 17 '18 at 0:35

Matthew Herbst

10.9k134688

answered Nov 15 '18 at 6:54

Ed Would

364

edited Nov 17 '18 at 0:35

Matthew Herbst

10.9k134688

edited Nov 17 '18 at 0:35

Matthew Herbst

10.9k134688

edited Nov 17 '18 at 0:35

Matthew Herbst

10.9k134688

answered Nov 15 '18 at 6:54

Ed Would

364

answered Nov 15 '18 at 6:54

Ed Would

364

answered Nov 15 '18 at 6:54

Ed Would

364

Note that there is a bug in this code - and extra ;. I pointed it out in the code which I have now formatted.

– Matthew Herbst
Nov 16 '18 at 8:53

That's an 'unnecessary' semi-colon. It will flag as such in a js tester but it's not a 'bug' that will break the code. I just use it so I can spot the end of a large multi-level if statement more easily.

– Ed Would
Nov 16 '18 at 14:41

It also helps avoid cut and paste errors if a line break is removed and the following statement ends up on the same line by mistake. This seems to be a pretty good reference.codecademy.com/en/forum_questions/507f6dd09266b70200000d7e

– Ed Would
Nov 16 '18 at 14:58

Good callout and sorry about that - I wasn't paying enough attention to where it was.

– Matthew Herbst
Nov 17 '18 at 0:36

add a comment |

Note that there is a bug in this code - and extra ;. I pointed it out in the code which I have now formatted.

– Matthew Herbst
Nov 16 '18 at 8:53

That's an 'unnecessary' semi-colon. It will flag as such in a js tester but it's not a 'bug' that will break the code. I just use it so I can spot the end of a large multi-level if statement more easily.

– Ed Would
Nov 16 '18 at 14:41

It also helps avoid cut and paste errors if a line break is removed and the following statement ends up on the same line by mistake. This seems to be a pretty good reference.codecademy.com/en/forum_questions/507f6dd09266b70200000d7e

– Ed Would
Nov 16 '18 at 14:58

Good callout and sorry about that - I wasn't paying enough attention to where it was.

– Matthew Herbst
Nov 17 '18 at 0:36

Note that there is a bug in this code - and extra ;. I pointed it out in the code which I have now formatted.

– Matthew Herbst
Nov 16 '18 at 8:53

That's an 'unnecessary' semi-colon. It will flag as such in a js tester but it's not a 'bug' that will break the code. I just use it so I can spot the end of a large multi-level if statement more easily.

– Ed Would
Nov 16 '18 at 14:41

It also helps avoid cut and paste errors if a line break is removed and the following statement ends up on the same line by mistake. This seems to be a pretty good reference.codecademy.com/en/forum_questions/507f6dd09266b70200000d7e

– Ed Would
Nov 16 '18 at 14:58

Good callout and sorry about that - I wasn't paying enough attention to where it was.

– Matthew Herbst
Nov 17 '18 at 0:36

add a comment |

It won't work because this:

setTimeout("changeImg()", time);

Is invalid syntax for setTimeout. To fix it, just do this:

setTimeout(changeImg, time);

answered Nov 15 '18 at 2:26

Jack Bashford

9,53131540

no, it's not invalid syntax at all

– Bravo
Nov 15 '18 at 2:32

Really? I thought it was invalid...

– Jack Bashford
Nov 15 '18 at 2:33

It does really look invalid, but unfortunately, it's not, setTimeout also accepts essentially eval strings as well

– CertainPerformance
Nov 15 '18 at 3:35

add a comment |

It won't work because this:

setTimeout("changeImg()", time);

Is invalid syntax for setTimeout. To fix it, just do this:

setTimeout(changeImg, time);

answered Nov 15 '18 at 2:26

Jack Bashford

9,53131540

no, it's not invalid syntax at all

– Bravo
Nov 15 '18 at 2:32

Really? I thought it was invalid...

– Jack Bashford
Nov 15 '18 at 2:33

It does really look invalid, but unfortunately, it's not, setTimeout also accepts essentially eval strings as well

– CertainPerformance
Nov 15 '18 at 3:35

add a comment |

It won't work because this:

setTimeout("changeImg()", time);

Is invalid syntax for setTimeout. To fix it, just do this:

setTimeout(changeImg, time);

answered Nov 15 '18 at 2:26

Jack Bashford

9,53131540

It won't work because this:

setTimeout("changeImg()", time);

Is invalid syntax for setTimeout. To fix it, just do this:

setTimeout(changeImg, time);

answered Nov 15 '18 at 2:26

Jack Bashford

9,53131540

answered Nov 15 '18 at 2:26

Jack Bashford

9,53131540

answered Nov 15 '18 at 2:26

Jack Bashford

9,53131540

answered Nov 15 '18 at 2:26

Jack Bashford

9,53131540

no, it's not invalid syntax at all

– Bravo
Nov 15 '18 at 2:32

Really? I thought it was invalid...

– Jack Bashford
Nov 15 '18 at 2:33

It does really look invalid, but unfortunately, it's not, setTimeout also accepts essentially eval strings as well

– CertainPerformance
Nov 15 '18 at 3:35

add a comment |

no, it's not invalid syntax at all

– Bravo
Nov 15 '18 at 2:32

Really? I thought it was invalid...

– Jack Bashford
Nov 15 '18 at 2:33

It does really look invalid, but unfortunately, it's not, setTimeout also accepts essentially eval strings as well

– CertainPerformance
Nov 15 '18 at 3:35

no, it's not invalid syntax at all

– Bravo
Nov 15 '18 at 2:32

Really? I thought it was invalid...

– Jack Bashford
Nov 15 '18 at 2:33

It does really look invalid, but unfortunately, it's not, setTimeout also accepts essentially eval strings as well

– CertainPerformance
Nov 15 '18 at 3:35

add a comment |

var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);

just move them to the bottom of the body section after the html and put script /script tags around them and see what happens

You need to do both of the above, what Matthew Herbst said is correct and what Jack Bashford said is correct. Create a variable for the setTimeout

var mytimeinverval;

var mytimer;

mytimer=setTimeout(myfunctionname,mytimeinterval);

edited Nov 15 '18 at 4:50

answered Nov 15 '18 at 2:49

Ed Would

364

@i edited the code as mathew suggested still not working and settime out function accepts methods with paranthesis given or without paranthesis or with just function name that doesnot make any difference but still gave a try and results the same

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:57

I tested 4 permutations:

– Ed Would
Nov 15 '18 at 3:49

I tested 4 permutations:with quotes and parens-correct, quotes without parens-no fire,parens no quotes-fires instantly,no parens no quotes-correct so sorry, you're way with both works just like my way with neither. I'll look at it again but if you did the var mytimer=setTimeout as well then I'm stuck.

– Ed Would
Nov 15 '18 at 4:00

add a comment |

var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);

just move them to the bottom of the body section after the html and put script /script tags around them and see what happens

You need to do both of the above, what Matthew Herbst said is correct and what Jack Bashford said is correct. Create a variable for the setTimeout

var mytimeinverval;

var mytimer;

mytimer=setTimeout(myfunctionname,mytimeinterval);

edited Nov 15 '18 at 4:50

answered Nov 15 '18 at 2:49

Ed Would

364

@i edited the code as mathew suggested still not working and settime out function accepts methods with paranthesis given or without paranthesis or with just function name that doesnot make any difference but still gave a try and results the same

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:57

I tested 4 permutations:

– Ed Would
Nov 15 '18 at 3:49

I tested 4 permutations:with quotes and parens-correct, quotes without parens-no fire,parens no quotes-fires instantly,no parens no quotes-correct so sorry, you're way with both works just like my way with neither. I'll look at it again but if you did the var mytimer=setTimeout as well then I'm stuck.

– Ed Would
Nov 15 '18 at 4:00

add a comment |

var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);

just move them to the bottom of the body section after the html and put script /script tags around them and see what happens

You need to do both of the above, what Matthew Herbst said is correct and what Jack Bashford said is correct. Create a variable for the setTimeout

var mytimeinverval;

var mytimer;

mytimer=setTimeout(myfunctionname,mytimeinterval);

edited Nov 15 '18 at 4:50

answered Nov 15 '18 at 2:49

Ed Would

364

var nextbutton=document.querySelector("#rightbutton");

nextbutton.addEventListener("click",rightbuttonclick);



var prevbutton=document.querySelector("#leftbutton");

nextbutton.addEventListener("click",leftbuttonclick);

just move them to the bottom of the body section after the html and put script /script tags around them and see what happens

You need to do both of the above, what Matthew Herbst said is correct and what Jack Bashford said is correct. Create a variable for the setTimeout

var mytimeinverval;

var mytimer;

mytimer=setTimeout(myfunctionname,mytimeinterval);

edited Nov 15 '18 at 4:50

answered Nov 15 '18 at 2:49

Ed Would

364

edited Nov 15 '18 at 4:50

answered Nov 15 '18 at 2:49

Ed Would

364

answered Nov 15 '18 at 2:49

Ed Would

364

answered Nov 15 '18 at 2:49

Ed Would

364

@i edited the code as mathew suggested still not working and settime out function accepts methods with paranthesis given or without paranthesis or with just function name that doesnot make any difference but still gave a try and results the same

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:57

I tested 4 permutations:

– Ed Would
Nov 15 '18 at 3:49

I tested 4 permutations:with quotes and parens-correct, quotes without parens-no fire,parens no quotes-fires instantly,no parens no quotes-correct so sorry, you're way with both works just like my way with neither. I'll look at it again but if you did the var mytimer=setTimeout as well then I'm stuck.

– Ed Would
Nov 15 '18 at 4:00

add a comment |

@i edited the code as mathew suggested still not working and settime out function accepts methods with paranthesis given or without paranthesis or with just function name that doesnot make any difference but still gave a try and results the same

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:57

I tested 4 permutations:

– Ed Would
Nov 15 '18 at 3:49

I tested 4 permutations:with quotes and parens-correct, quotes without parens-no fire,parens no quotes-fires instantly,no parens no quotes-correct so sorry, you're way with both works just like my way with neither. I'll look at it again but if you did the var mytimer=setTimeout as well then I'm stuck.

– Ed Would
Nov 15 '18 at 4:00

@i edited the code as mathew suggested still not working and settime out function accepts methods with paranthesis given or without paranthesis or with just function name that doesnot make any difference but still gave a try and results the same

– Faizal Mohaideen Kadersha
Nov 15 '18 at 2:57

I tested 4 permutations:

– Ed Would
Nov 15 '18 at 3:49

I tested 4 permutations:with quotes and parens-correct, quotes without parens-no fire,parens no quotes-fires instantly,no parens no quotes-correct so sorry, you're way with both works just like my way with neither. I'll look at it again but if you did the var mytimer=setTimeout as well then I'm stuck.

– Ed Would
Nov 15 '18 at 4:00

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky