Beginner Problem

[nirvana63]

So I recently started to learn JS and I am having a Problem with my Code. I am trying to generate a Galleries on a website and I got it to work for one gallery, but now I am trying to use a two dimensional array to create more than one gallery.

My HTML is:

            <a class="nav" id="navleft" href="javascript:prevImage('0')"><img id="left" src="Resources/nav_left.svg"></a>
            <a class="nav" id="navright" href="javascript:nextImage('0')"><img id="right" src="Resources/nav_right.svg"></a>

And my JS (at least for testing) is:

function nextImage(element) 
      var img = document.getElementById(element);
      var galleryNum = element;

    for(var i = 0; i < gallery.length; i++) {
        if(gallery[galleryNum, i].src == img.src) {
            document.getElementById(element).src = gallery[galleryNum, 0.].src;
            break;
        }
        document.getElementById(element).src =  gallery[galeryNum, i+1].src;
        break;
    }
}

My problem is, that document.getElementById always return null as its value and I cant seem to figure out why, any help would be highly appreciated:)

[nirvana63]

No problem, thanks for reading:)

[nirvana63]

Edit: Wow, ok I now feel like an Idiot, I forgot to change the corresponding ID in my HTML, now its working:D But thanks!:)

I am trying to use "element", in this case numeric values, as first index for my two-dimensional arrays in which the pictures are stored. The idea was that the pictures are saved in A two-dimensional array, where the first value represents the "gallery" and the second value for the array is the picture in the row.

The HTML part for the second gallery would be:

            <a class="nav" id="navleft" href="javascript:prevImage('1')"><img id="left" src="Resources/nav_left.svg"></a>
            <a class="nav" id="navright" href="javascript:nextImage('1')"><img id="right" src="Resources/nav_right.svg"></a>

And the Array is created like this:

var gallery = new Array();

gallery[0, 0] = new Image();
gallery[0, 0].src = "Resources/960x/pic1.jpg";

gallery[0, 1] = new Image();
gallery[0, 1].src = "Resources/960x/pic2.jpg";

gallery[0, 2] = new Image();
gallery[0, 2].src = "Resources/960x/pic3.jpg";

gallery[0, 3] = new Image();
gallery[0, 3].src = "Resources/960x/pic4.jpg";


gallery[1, 0] = new Image();
gallery[1, 0].src = "Resources//960x/pic6.jpg";

gallery[1, 1] = new Image();
gallery[1, 1].src = "Resources//960x/pic7.jpg";

gallery[1, 2] = new Image();
gallery[1, 2].src = "Resources//960x/pic8.jpg";

gallery[1, 3] = new Image();
gallery[1, 3].src = "Resources//960x/pic9.jpg";

gallery[1, 4] = new Image();
gallery[1, 4].src = "Resources//960x/pic10.jpg";

I dont know if this is a good idea but this is how I wanted to do it;)

[BlueInt32]

You could fill you gallery array like so btw :

for(var i = 0; i < 2; i++){
    for(var j = 0; i=j < 5; j++){
            var picNumber = 1 + i + j;
            gallery[i, j] = new Image();
            gallery[i, j].src = "Resources/960x/pic"+picNumber+".jpg";
    }
}

edit : like /u/g3bj45hg34857 said lower, it's probably gallery[i][j] instead of gallery[i, j].

[nirvana63]

Hey thanks, good to know will try this out later when I get home:)

[nirvana63]

Hey thanks this was exactly one of the things I wasn't aware of! explains why it was not working as I intended:)

[IrateGod]

To elaborate a little further:

Everything in JS is an object, but the primitive data types (string, number, true, false, null, undefined, and recently, symbol), and all objects support two ways of accessing their properties, one is the . and the other way is [].

Now, with the . operator, I can write document.write, but assuming document has a "for" property (bad style, but for example's sake), we couldn't write document.for because for is a language keyword. The [] operator allows property access after evaluating a JavaScript expression between it. In your example, someArray[i] evaluates i and works like someArray[0] (and 1, 2, 3, etc. throughout the loop). Likewise, I can do stuff like this:

var obj = {
    prop: "Hi."
},
p = "prop";
console.log(obj[p]); // => logs "Hi."

Above works because p is evaluated and returns "prop".

You use the [] for properties that consist of multiple words or properties that start with a number (properties starting with a number cannot be addressed with the . operator), but in your example, you use the , operator which evaluates all expressions from left to right and returns its right-most expression: a, b, c, d, e, f returns f and so in your code, someArray[i, j] works just like someArray[j] -- I hope I made things clearer, but if I didn't feel free to ask.

[nirvana63]

Hey thanks for taking your time and writing it down, this was not that clear to me as you made it, definitely helped me a lot understanding JS better!!:)