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>

there's a few things here that you may want to change: instead of a 1998 onclick in the HTML, find the button in JS instead (document.querySelector, for instance) and then use .addEventListener("click", function(evt) { ...});. array does not live in your HTML, so don't pretend it's there. Do your JS, in JS. Also, images have the Image object. var x = new Image(); x.src = ...; document.body.appendChild(x); works fine. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Feb 21, 2016 at 6:25

Community · Accepted Answer · 2017-05-23 12:15:36Z

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.

6502 · Accepted Answer · 2016-02-21 06:45:48Z

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... i.e.

<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.

Collectives™ on Stack Overflow

Javascript: Display images out of array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related