Create a function to add an image to an array on click of button

Question

I have a web page that displays an array of images of world leaders.

I need to add a button that will add an additional leader onto that array and display it as well.
If anyone could point me in the right direction, thanks in advance.

<button class="btn" id="addLeader">Add Leader</button>

</section>


<script type="text/javascript">

window.onload = function () {


    var ArrayOfImages = ['images/trump.jpg', 'images/putin.jpg', 'images/merkel.jpg', 'images/jinping.jpg'];  //array of images
    ArrayOfImages.forEach(function (image) {    // for each link l in ArrayOfImages
        var img = document.createElement('img'); // create an img element
        img.src = image;                         // set its src to the link l
        img.height = '300';
        img.width = '200';
        img.hspace = '20';
        document.body.appendChild(img);          // append it to the body 
    });


        var addButton = document.getElementById('addLeader');
        addButton.addEventListener('click', addLeader);

    }

   function addLeader(){
    ArrayOfImages.push('images/kimjongun.jpg');
    console.log(ArrayOfImages);
   }


</script>

ktilcu · Accepted Answer · 2017-11-06 22:24:32Z

1

If you turn the display part into a function you can call it to re-render. I made a simple and naive version.

var ArrayOfImages = ['images/trump.jpg', 'images/putin.jpg', 'images/merkel.jpg', 'images/jinping.jpg'];  //array of images

function displayImages (images) {
    images.forEach(function (image) {    // for each link l in ArrayOfImages
        var img = document.createElement('img'); // create an img element
        img.src = image;                         // set its src to the link l
        img.height = '300';
        img.width = '200';
        img.hspace = '20';
        document.body.appendChild(img);          // append it to the body 
    });
}

var addButton = document.getElementById('addLeader');
addButton.addEventListener('click', addLeader);
displayImages(ArrayOfImages);

function addLeader(){
    ArrayOfImages.push('images/kimjongun.jpg');
    document.body.innerHTML = ''; //clear previous images
    displayImages(ArrayOfImages);
}

edited Nov 6, 2017 at 22:24

answered Nov 6, 2017 at 21:17

ktilcu

3,1381 gold badge20 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MattBerg Over a year ago

When implementing this code no images show up on screen. Do you know why this could happen?

ktilcu Over a year ago

Oh. You'll want to call displayImages the first time I'll edit

MattBerg Over a year ago

Ah thanks a million, that solved the problem of no images being displayed. The problem now is that when I click the add leader button nothing is happening. I've watched it in the debugger and I'm not clear if the function is running.

MattBerg Over a year ago

It was because I didn't put the addleader function into the window.onload function. The clear innerHTML that is in the addleader function is removing all of my html for the whole webpage though. Do you know a way to just remove the array and not all html?

ktilcu Over a year ago

@MattBerg yeah put the leaders in their own div or something.

Collectives™ on Stack Overflow

Create a function to add an image to an array on click of button

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related