Running Multiple Image Scripts on One Page?

JavaScript
1

I decided to ask this question here, as I’m quite inexperienced with Javascript, and the crowd at StackOverflow isn’t particularly timely and they tend to just “downvote” my questions and ignore them otherwise.

I have the following code:

<IMG SRC="http://example.com/-8ChQ3SBxYOY/U9bSBt4bcMI/AAAAAAAARDE/zLDJ1kP903A/s1600/1.png" name="VCRImage" BORDER=0>

<IMG SRC="http://example.com/-8ChQ3SBxYOY/U9bSBt4bcMI/AAAAAAAARDE/zLDJ1kP903A/s1600/1.png" name="VCRImage" BORDER=0>

<script type="text/javascript">

  //Declare an image array same as calling new Array();
    var img = []
    img[0] = "http://2.bp.blogspot.com/-DNISePZjJ4g/U9bSB5NjEzI/AAAAAAAARCw/K7OGOPjQd0Q/s1600/2.png";
    img[1] = "http://4.bp.blogspot.com/-MoL1MHN12Eo/U9bSB6EIS-I/AAAAAAAARCs/gUSKbzsg05g/s1600/3.png";

    //Select all elements on the page with the name attribute equal to VCRImage
    var images = document.querySelectorAll('[name=VCRImage]');

    //For each image bind the click event
    for(var i=0; i < images.length; i++)
    {
      var image = images[i];
      //https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
      image.addEventListener('click', imageClicked(), false);
    }

    function imageClicked()
    {
      //Use a closure to wrap the counter variable
      //so each image element has their own unique counter
      var counter = 0;
      return function(event)
      {
        //Increment counter
        counter++;
        //The context of "this" is the image element
        //Use a modulus
        this.src = img[counter % img.length];
      }
    }

</script>

What I want to do is run multiples of these on one page. Or simply have different images run different sets of other images when clicked. What’s the best way to accomplish this?

2

A couple of things may help here. Firstly, use a class (not a name) on those images. Then the images can be gathered with querySelectorAll(‘.classname’). The ‘name’ attribute is somewhat out of fashion with the <img> tag (and is deprecated in xhtml).

Secondly, a closure may not be all that helpful here. It is simpler to just use a counter property for each image object. The code below works:

<img src="http://example.com/-8ChQ3SBxYOY/U9bSBt4bcMI/AAAAAAAARDE/zLDJ1kP903A/s1600/1.png" class="VCRImage">
<img src="http://example.com/-8ChQ3SBxYOY/U9bSBt4bcMI/AAAAAAAARDE/zLDJ1kP903A/s1600/1.png"
class="VCRImage">

<script type="text/javascript">
var img = [];
img[0] = "http://2.bp.blogspot.com/-DNISePZjJ4g/U9bSB5NjEzI/AAAAAAAARCw/K7OGOPjQd0Q/s1600/2.png";
img[1] = "http://4.bp.blogspot.com/-MoL1MHN12Eo/U9bSB6EIS-I/AAAAAAAARCs/gUSKbzsg05g/s1600/3.png";

//Select all elements on the page with class VCRImage
var images = document.querySelectorAll('.VCRImage');

//For each image bind the click event
for(var i=0; i < images.length; i++){
   var image = images[i];
   image.counter = 0; // a counter property for each image
   image.addEventListener('click', imageClicked, false);
}

function imageClicked(){
   this.counter++;
   this.src = img[this.counter % img.length];
}
</script>