Loading images with javascript

By clicking on the button , the random two pictures should appear of 12 included in two boxes.But something goes wrong.Need advice to solve this this problem.

var startBtn = document.getElementById("start-button");
var imgBox1 = document.getElementById("firstBox");
var imgBox2 = document.getElementById("secondBox");


var images = [
    '/assets/img/pic1.png',
    '/assets/img/pic2.png',
    '/assets/img/pic3.png',
    '/assets/img/pic4.png',
    '/assets/img/pic5.png',
    '/assets/img/pic6.png',
    '/assets/img/pic7.png',
    '/assets/img/pic8.png',
    '/assets/img/pic9.png',
    '/assets/img/pic10.png',
    '/assets/img/pic11.png',
    '/assets/img/pic12.png',
    
];

function loadImages(imgArr){
    for(var i=0; i< imgArr.length; i++) {
        console.log(imgArr[i]);
        var img = new Image();
            img.src = imgArr[i];
        document.getElementById('output').appendChild(img);
       
    }
 
}
    


startBtn.onclick = function(){
    
imgBox1.style.backgroundImage = images[Math.floor(Math.random()*images.length)];
imgBox2.style.backgroundImage = images[Math.floor(Math.random()*images.length)];
}