时间戳

首页 > 解决方案 > 如何在 JS 中制作一个按钮数组？以及如何设置随机图像？

javascript - 如何在 JS 中制作一个按钮数组？以及如何设置随机图像？

问题描述

所以我正在尝试制作一个记忆游戏。目前我正在尝试随机设置卡片的图像，但我的代码只是更改为顶部图像。

var images = ["url(IMG1.jpg)","url(IMG2.jpg)"...];
var randomIMG =0;

var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront(this)'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2'onclick='Flipback(this)'style='width:300px;height:300px; marign:50px; background-image:images[randomIMG];background-repeat:no-repeat;background-size:contain;'></button></div></div></div>"



for (let i = 0; i < level; i++) {
    document.querySelector("#container").innerHTML +=card;
}
function RandomBG(){
    for (let i = 0; i<level;i++){
        randomIMG = Math.floor(Math.random()*9)+0;
        document.getElementById("button2").style.backgroundImage = images[randomIMG]; 
    }
}
function Flipfront(el){
            RandomBG();
             el.closest('.flip-card').classList.add('flipped');
            flipped++;

}

而且以后，我如何将所有按钮放入一个数组中？

标签： javascriptjqueryarraysimagerandom

解决方案

在这一行

document.getElementById("button2").style.backgroundImage = images[randomIMG];

您正在设置的背景button2。您需要确保获得正确的元素：

function RandomBG(el){
    for (let i = 0; i<level;i++){
        randomIMG = Math.floor(Math.random()*9)+0;
        el.style.backgroundImage = images[randomIMG]; 
    }
}

并且你通过了它：

function Flipfront(el){
            RandomBG();
             el.closest('.flip-card').classList.add('flipped');
            flipped++;

}

推荐阅读