How do I make buttons from images in javascript?

by Artur Filipiak

HTML

<div class="panel" id="imageDiv">
</div>

<div class="panel" id="out">
    Output
</div>

CSS

.panel {
    border: 1px solid grey;
    margin-top: 20px;
    padding: 20px;
}

JavaScript

var fruit = ['apple.png', 'banana.png', 'orange.png'];
var animals = ['hawk.png'];
var imageDiv = document.getElementById('imageDiv');

for( var i = 0; i < (fruit.length ); i++){
    
    var imgElement = document.createElement('img');
    imgElement.setAttribute('id', fruit[i].replace(/\.[^\.]+$/,''));
    imgElement.setAttribute('src', 'Images/' + fruit[i]);
    appendClickEvent(imgElement);
    imageDiv.appendChild(imgElement);
    
}

for( var j = 0; j < (animals.length ); j++){

    var imgElement2 = document.createElement('img');
    imgElement2.setAttribute('id', animals[j].replace(/\.[^\.]+$/,''));
    imgElement2.setAttribute('src', 'Images/' + animals[j]);
    appendClickEvent(imgElement2);
    imageDiv.appendChild(imgElement2);
}

function appendClickEvent(el){
    el.onclick = function(){
       document.getElementById('out').innerHTML = this.id;
    }
}