Image swapping using JavaScript not working

Question

I want to swap images using JavaScript. When only section1 is used the swapping of image works but when section2 is added then the swapping of image works only on section2(stops swapping in section1).

Codes are:

JavaScript
--section1--

var imagetracker="m";
function change(){
var image=document.getElementById('image1');
if(imagetracker=="m"){
    image.src="images/momo 2.jpg";
    imagetracker="t";
}else if(imagetracker=='t'){
    image.src="images/taco.jpg";
    imagetracker="m";
}
}
var timer = setInterval('change()',2000);

--section2--

var imagetracker="p2";
function change2(){
var image=document.getElementById('image2');
if(imagetracker=="p2"){
    image.src="images/pizza 2.jpg";
    imagetracker="b";
}else if(imagetracker=='b'){
    image.src="images/burrito 2.jpg";
    imagetracker="p2";
}
}
var timer2 = setInterval('change2()',2000);

HTML

<img src="images/momo 2.jpg" height="150" width="220" id="image1">
<img src="images/pizza 2.jpg" height="150" width="220" id="image2"><p>

How should be done to make section1 work?

`setInterval(change, 2000)` – Andrew Li Jun 27 '16 at 05:49 — Andrew Li, Jun 27 '16 at 05:49

score 1 · Answer 1 · edited May 23 '17 at 10:28

Since you are using same imagetracker variable for both, it may cause problem since values are different. So use different variables for both, that may fix your problem.

var imagetracker = "m";

function change() {
  var image = document.getElementById('image1');
  if (imagetracker == "m") {
    image.src = "images/momo 2.jpg";
    imagetracker = "t";
  } else if (imagetracker == 't') {
    image.src = "images/taco.jpg";
    imagetracker = "m";
  }
}
var timer = setInterval('change()', 2000);

var imagetracker1 = "p2";

function change2() {
  var image = document.getElementById('image2');
  if (imagetracker1 == "p2") {
    image.src = "images/pizza 2.jpg";
    imagetracker1 = "b";
  } else if (imagetracker1 == 'b') {
    image.src = "images/burrito 2.jpg";
    imagetracke1r = "p2";
  }
}
var timer2 = setInterval('change2()', 2000);

<img src="images/momo 2.jpg" height="150" width="220" id="image1">
<img src="images/pizza 2.jpg" height="150" width="220" id="image2">
<p>

Also instead of the string param you can use function reference as argument, that may be much better way to do it.

var timer2 = setInterval(change, 2000);

FYI : String of code is not recommenced because that have lot of security problems, since it's working using eval().

Refer : Why is using the JavaScript eval function a bad idea?

Andrew Li · Accepted Answer · 2016-06-27T06:02:33.340

1

You have two imagetracker variables. Rename either one so that there is one of each.

You assign imagetracker to "m" and "p2" which will cause an error because there are two defined variables of the same name.

You can change the setInterval lines to:

var timer = setInterval(change, 2000);

This gives the function as a parameter and sets the interval to run change() every 2 seconds. This also applies to the second timer.

Your version is fine and strings are fine to be passed as functions.

Here is a reference on the setInterval function from W3Schools

edited Jun 27 '16 at 06:02

answered Jun 27 '16 at 05:51

Andrew Li

55,805
14
125
143

@Andrew L. Thank you for your great effort! It finally solved the problem. Now the images are swapping perfectly. – 007mrviper Jun 27 '16 at 06:08
No problem! If you need anything else, just ask! – Andrew Li Jun 27 '16 at 06:09

vp_arth · Answer 3 · 2016-06-27T06:26:22.417

Too unscalable code.
Let's try fix it :)

function rotImg(id, urls) {
  var img = document.getElementById(id);
  var index = -1;
  return function() {
    if (++index >= urls.length) index = 0;
    img.src = urls[index];
  };
}
setInterval(rotImg('image1', [
  'images/momo 2.jpg', 
  'images/taco.jpg'
]), 2000);
setInterval(rotImg('image2', [
  'images/pizza 2.jpg', 
  'images/burrito 2.jpg'
]), 2000);

function rotImg(id, urls) {
  var img = document.getElementById(id);
  var index = -1;
  return function() {
    if (++index >= urls.length) index = 0;
    img.src = urls[index];
  };
}
setInterval(rotImg('image1', [
  'https://placekitten.com/200/300',
  'https://placekitten.com/200/301',
  'https://placekitten.com/201/300'
]), 2000);
setInterval(rotImg('image2', [
  'https://placekitten.com/300/200',
  'https://placekitten.com/300/201',
  'https://placekitten.com/301/200'
]), 2000);

<img src="https://placekitten.com/201/300" height="220" id="image1">
<img src="https://placekitten.com/301/200" height="220" id="image2">

I tried to run your code but the images aren't swapping. – 007mrviper Jun 27 '16 at 06:17 — 007mrviper, Jun 27 '16 at 06:17
Thanks for snippet, I've changed images to kittens :) – vp_arth Jun 27 '16 at 06:27 — vp_arth, Jun 27 '16 at 06:27

Image swapping using JavaScript not working

3 Answers3