JQuery Array for images

Question

This is a silly little question, I know, but I can't seem to find the answer to it...

I'm trying to change an image in Jquery using an array with the names, but it reads n, g and 2 instead of the actual values.

My code is:

var huidig = 1;
var arrayTekenen = jQuery.makeArray("peng1.png","peng2.png","peng3.png","peng4.png");

$(document).ready(
     function() {
         $('#next').bind('click', ClickNext);
     }
 )
 function ClickNext() {
    if(huidig<4)
       {
        huidig++; 
       }

    $("#tekenstap").attr('src', 'img/' + arrayTekenen[huidig]); 
 }

This is the error I get when clicking the object:

Failed to load resource (15:27:28:901 | error, network) at http:// localhost:8383/HTML5Application/img/n Failed to load resource (15:27:30:048 | error, network) at http:// localhost:8383/HTML5Application/img/g Failed to load resource (15:27:30:729 | error, network) at http:// localhost:8383/HTML5Application/img/2

Thanks in advance.

Oh, thanks, forgot that for a second there.

M. Boeckx
– M. Boeckx

2013-05-25 13:39:08 +00:00
Commented May 25, 2013 at 13:39 — M. Boeckx
– M. Boeckx, Commented May 25, 2013 at 13:39

Florian Margaine · Accepted Answer · 2013-05-25 13:47:03Z

4

jQuery.makeArray doesn't do what you think it does.

It's not there to create an array. It transforms an array-like to a real array, and takes only one argument: the array-like.

If you want to create an array, use the following syntax:

var arrayTekenen = ["peng1.png","peng2.png","peng3.png","peng4.png"];

Some resource you should read: MDN Array.

Now you're asking me: what's an array-like object? It's an object that looks like an array, quacks like an array, walks like an array, but isn't an array. Examples are arguments, NodeLists or HTMLCollection. Mainly, they can be used as arrays, but don't have the array methods like slice, splice, forEach, etc.

What $.makeArray does is basically this:

function makeArray(obj) {
    return Array.prototype.slice.call(obj);
}

I leave it to you to understand how this works :-)

edited May 25, 2013 at 13:47

answered May 25, 2013 at 13:37

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

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

4 Comments

M. Boeckx Over a year ago

Thanks for the extra information. The amount of help I get from the people on this website is amazing.

Florian Margaine Over a year ago

You're welcome! This kind of comment is what makes it worthwile to contribute on this website :)

moonwave99 Over a year ago

@FlorianMargaine +1, great answer and attitude.

WeebleWobb Over a year ago

@FlorianMargaine +1 You had me at quacks like an array. Great answer and explanation.

Dennis · Accepted Answer · 2013-05-25 13:37:10Z

2

That is not how jQuery.makeArray works. Just use array literal notation:

var arrayTekenen = ["peng1.png","peng2.png","peng3.png","peng4.png"];

In your case, arrayTekenen turns out to be a string ("peng2.png") so arrayTekenen[i] is a character instead of the filename.

answered May 25, 2013 at 13:37

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Collectives™ on Stack Overflow

JQuery Array for images

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related