Загрузка изображений с помощью JavaScript

Question

При нажатии на кнопку должны появиться две случайные картинки из 12 включенных в две коробки. Но что-то идет не так. Нужен совет, чтобы решить эту проблему.

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

Answer 1

Вы не добавили кнопку с идентификатором start-button, по которой хотите нажать. По сути, вы ничего не нажимаете.

<button type="button" id="start-button" style="">Start</button>

Answer 2

Вам необходимо использовать функцию CSS url при настройке фонового изображения:

startBtn.addEventListener("click", function() {
  imgBox1.style.backgroundImage = `url('${images[Math.floor(Math.random() * images.length)]}')`
  imgBox2.style.backgroundImage = `url('${images[Math.floor(Math.random() * images.length)]}')`
});