Как сделать из этого массив кнопок в JS? И как я могу установить случайные изображения с этим?

Question

Итак, я пытаюсь сделать игру на память. В данный момент я пытаюсь установить изображение карты в случайном порядке, но мой код просто меняется на верхнее изображение.

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++;

}

И еще позже, как мне поместить все мои кнопки в массив?

Answer 1

В этой строке

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++;

}

Answer 2

Если все, что вы пытаетесь сделать, это получить все кнопки на странице:

let btns = document.querySelectorAll("button");

А если вам нужно несколько определенных c, измените селектор css.