document.getElementById(array[x]) returning null

Question

I am trying to call an element using an array index value but I keep getting a null message.

JS:

function img_disp() {
  var num = 0;
  var images_array = ["person_1","person_2","person_3","person_4","person_5","person_6","person_7","person_8","person_9","person_10","person_11","person_12"];
  document.getElementById(images_array[num]).style.visibility = "visible";
}

What can I do to make this work? I want to be able to call different ids using 1 function.

Thanks

Post a demo to reproduce the issue. As is, it looks fine. Are you sure the element exists when the script runs? — elclanrs, Jun 29 '15 at 22:22
AHHH yeah I feel really stupid. The DOM wasn't loaded yet. Thanks a ton guys! — Konig, Jun 29 '15 at 22:46

score 0 · Answer 1 · edited May 23 '17 at 12:14

You're not incrementing the variable num, You can use loops to do it, eg:

function img_disp() {
    var images_array = ["person_1","person_2","person_3","person_4","person_5","person_6","person_7","person_8","person_9","person_10","person_11","person_12"];
    for(var num = 0; num < images_array.length; num++){
        document.getElementById(images_array[num]).style.visibility = "visible";
    }
}

img_disp() It should be called when the DOM is loaded. Check this question, for know more about it.

document.getElementById(array[x]) returning null

1 Answers1