javascript - 创建一个函数，通过单击按钮将图像添加到数组中

Question

我有一个网页，显示一系列世界领导人的图像。

我需要添加一个按钮，该按钮将在该数组上添加一个额外的引线并显示它。
如果有人能指出我正确的方向，请提前致谢。

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

Answer 1

如果你把显示部分变成一个函数，你可以调用它来重新渲染。我做了一个简单而幼稚的版本。

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);
}