change images displayed from a array using function called from a click

Question

I have an array of three images. I want to call the function from onClick. Here's my code. I know can be done with jQuery but I'm just using plain JavaScript.

JavaScript

var myArray =    ["_images/taste_logo_130w.gif","_images/logo.gif", "_images/winery_sign.jpg"];
var current = 0;
function imageTimer() {
    if(current >= array.length) {
        documnent.getElementById("logo").src = array[current];
        current ++;
    }
}

HTML

<img src="_images/logo.gif" id="logo" width="192" height="237" onClick=setInterval("imageTimer()", 3000);  />

At first, you shouldn't use inline event handler! Second, you should use setTimeout instead! and if you want you can read more about setInterval and setTimeout. JavaScript: Bad Practices — Givi
– Givi, Commented Nov 29, 2013 at 12:32

Mikhail Timofeev · Accepted Answer · 2013-11-29 12:10:23Z

1

Perhaps so?

function imageTimer() {
    if(current < array.length) {
        current++;
    }else{
        current = 0;
    }
    documnent.getElementById("logo").src = array[current];
}

or shorter:

   function imageTimer() {
        (current < array.length) ? current++ : current = 0;
        documnent.getElementById("logo").src = array[current];
    }

edited Nov 29, 2013 at 12:10

answered Nov 29, 2013 at 12:03

Mikhail Timofeev

2,16916 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Givi Over a year ago

Or even shorter :) documnent.getElementById("logo").src = array[current >= array.length ? 0 : current++];

Praveen · Accepted Answer · 2013-11-29 12:27:27Z

1

(1)

if(current >= array.length) { // fail always

since current is 0 and array.length is 3

So above condition will fail always.

(2) what happens on 4th click, there is no image. So better recycle it by resetting the value of current to zero.

Code:

var myArray =    ["_images/taste_logo_130w.gif","_images/logo.gif", "_images/winery_sign.jpg"];
var current = 0;
function imageTimer() {
    if(current <= array.length) {
        documnent.getElementById("logo").src = array[current];
        current ++;
    }
    else {
      current = 0;  //reset back to zero  on 4th click
    } 
}

edited Nov 29, 2013 at 12:27

answered Nov 29, 2013 at 12:04

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

1 Comment

Mikhail Timofeev Over a year ago

and what happens with the picture on the 4-th, 8-th, 12-th[...] click? ;)

J2D8T · Accepted Answer · 2013-11-29 12:26:16Z

0

You have an array myArray but in the function you are calling the .lenght on array so change that to myArray.lenght and you have array[current] which should be myArray[current]. Your if condition will also always be false if you have if(current >= myArray.lenght) because (0 >= 3) is always false.

Try this:

var myArray =    ["_images/taste_logo_130w.gif","_images/logo.gif", "_images/winery_sign.jpg"];
var current = 0;
function imageTimer() {
  if(current < myArray.length) {
    documnent.getElementById("logo").src = myArray[current];
    current ++;
  }
}

edited Nov 29, 2013 at 12:26

answered Nov 29, 2013 at 12:07

J2D8T

82311 silver badges25 bronze badges

Comments

aniruddha · Accepted Answer · 2013-11-29 12:10:22Z

-1

javascript:

  var myArray =    ["_images/
  taste_logo_130w.gif","_images/logo.gif",
  "_images/winery_sign.jpg"];
  var current;
  var timr;
  function imageTimer() {
  if(current < array.length) {
    documnent.getElementById
    ("logo").src = array[current];
    current ++;
  }
  else clearInterval(timr);
  }

html:

  <img src="_images/logo.gif" id="logo"
  width="192" height="237" onClick="timr=setInterval
  (function(){
   current=0;
   imageTimer();
   }, 3000);  "/>

answered Nov 29, 2013 at 12:10

aniruddha

715 bronze badges

Collectives™ on Stack Overflow

change images displayed from a array using function called from a click

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related