ボタンをクリックすると配列に画像を追加する機能を作成します

Question

ワールドリーダーの画像を表示するWebページがあります。

リーダーにリーダーを追加して表示するボタンを追加する必要があります。
誰かが正しい方向に私を指すことができる場合は、事前に感謝します。

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