Get img src and img dimensions from two dimensional array and display in body

Question

I'm trying to get the image source and set dimensions from an two dimensional array

var ImgArray=new Array(2)

ImgArray[0][0] = ["http://imgsrc.jpg"]
ImgArray[0][1] = [width="200",height="200"]
ImgArray[1][0] = ["http://imgsrc.jpg"]
ImgArray[1][1] = [width="200",height="200"]

,change the dimensions of the source to the new dimensions (200x200)

var i=0;
var j=0;

function NextImg(){
    ++i;
    ++j;
    document.getElementById('imageset').width = ImgArray[i][j]
    document.getElementById('imageset').height = ImgArray[i][j]
    document.getElementById('imageset').src = ImgArray[i][j]
}

And display the result here

<img id="imageset" /> 
<button type="button" onclick="NextImg()">Next image</button>

Answer 1

You need to open up your dev tools (F12 in most browser) and look at the errors coming up. Once you do so it becomes very obvious that large chunks of your code aren't even valid javascript, and many other parts have big problems as well.

For example, you start assigning values to ImgArray[0][0]...but there isn't even an ImgArray[0] yet to assign a [0] to. You may have an Array with a length of 2...but of 2 what? Those values are still undefined. You would need to set them as being new Arrays themselves before you could start utilizing them as Arrays. Your dev tools would have immediately told you that that was an issue.

And the values you are assigning aren't valid JS in many cases, such as [width="200",height="200"]. That's simply not JS.

If you're trying to make an Object with width/height properties it would be {width:"200", height:"200"}, and if you're trying make an Array (which your future usage suggests) then it would be ["200", "200"], as Array elements don't have property names in that way, they are indexed from 0. So the first one would just be [0] and the second one [1].

On top of that, there is no purpose to your j variable, or to incrementing it. There is no other incrementing variable needed.

And you're incrementing at the start of the function too, so your first image would be the second ([1]) index of the Array. Try starting i at -1 in order for 0 to be the first result after incrementing.

A working JSFiddle is here: https://jsfiddle.net/c0psj611/

And a far better way (using Objects to store associated data) is here: https://jsfiddle.net/2s5x7nL5/