mardi 24 mars 2020

How do I make an Array of Buttons out of this in JS? And How do I set Random Images with this?

So I`m trying to make a Memory Game. At the moment I´m trying to set the Image of the card randomly but if my code just changes to top Image.

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

}

And Also for later on, how do I put all my Buttons into an array?




Aucun commentaire:

Enregistrer un commentaire