Javascript: Display images out of array

Question

I created a very simple script that reads out images of an array and displays them on a page. The array is supposed to hold more than images, but this is how I started. I get function undefined when I run the program I think this is a scope issue and the function can not be accessed when called(?)

<button onclick="myFunction(images)">Try it</button>

<script>

var images = [
{img : " image1.jpg"},
{img : "image2.jpg"}
]

function myFunction(array) {


for ( var i= 0; i < array.length; i++){

var x = document.createElement("IMG");
x.setAttribute("src", array[i].img);

document.body.appendChild(x);

}
</script>

Answer 1

I get function undefined when I run the program I think this is a scope issue and the function can not be accessed when called(?)

Place the script tag before your Button HTML, so that the function is parsed and available to be set in the button onclick event.

<script>

var images = [
{img : " image1.jpg"},
{img : "image2.jpg"}
]

function myFunction(array) {


for ( var i= 0; i < array.length; i++){

var x = document.createElement("IMG");
x.setAttribute("src", array[i].img);

document.body.appendChild(x);

}
</script>

<button onclick="myFunction(images)">Try it</button>

It works for me like this. Also I had answered similar question Check this

Also I would recommend to use the Jquery document ready event to bind events to the elements . Like

   $(function(){
     $('#yourBtnId').on('click',function(){
        myFunction(images);
     });
   });

That way you have more control on binding events, like binding to events conditionally etc.

Answer 2

You've been unlucky when choosing the name for the array.

Apparently the browsers (at least chrome) defines already an images that will contain all the images in the page when evaluating the string for the event and this array will be empty (because initially there are no images as you're creating them dynamically).

I'm not sure exactly why it happens but rather than a bug it could be something related to backward compatibility with early days of HTML... my google-fu is not strong enough to find a reference for this.

If you simply change the name of the array to imgs your code will work as expected in chrome.

Anyways to avoid this kind of problems the normal solution is to bind event handlers dynamically to closures instead of using strings... ie

<button id="mybutton">Click me</button>
...
<script>
    (function(){
        var images = [ ... ];
        mybutton.onclick = function(){ loadImages(images); };
    })();
</script>

with this approach the javascript code will be more reliable, not depending on global names defined by others and not defining any global name that could interfere with fragile code written by others.