使用 javascript 加载图像答案

【问题标题】：Loading images with javascript使用 javascript 加载图像
【发布时间】：2018-08-31 17:46:33
【问题描述】：

通过点击按钮，应该随机出现两张图片，包含在两个框中。但是出现了问题。需要建议来解决这个问题。

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

【问题讨论】：

请更具描述性。 “出了点问题”，并不是对问题的充分描述。详细描述实际发生的情况（包括任何错误消息）以及您期望发生的情况。

标签： javascript html image random

【解决方案1】：

设置背景图片时需要使用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)]}')`
});

【讨论】：

【解决方案2】：

您没有添加要单击的 ID 为 start-button 的按钮。基本上你什么都没有点击。

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

【讨论】：

这不太可能是代码的问题。作者根本没有显示 HTML，你怎么知道他们没有忘记在 HTML 中包含他们的脚本？这当然看起来像一个类似的问题;-)