How do is use the SetInterval function and the 'if' to make div's pop up?

Question

i have this script for a Whack a mole game, but i can't seem to make my div's pop up when I want them to by using a random number generator. This is my code:(by the way this is my first game I have ever made so it's pobably a stupid question :))

        //minigame
setInterval(function() {
var randomnumber = 1 + Math.floor(Math.random() * 10);  
            if (randomnumber = "1") {
                $('#mole1').show();
                };
            if (randomnumber = '2') {
                $('#mole1').show();
                };
            if (randomnumber = '3') {
                $('#mole1').show().delay(300).hide();
                };
            if (randomnumber = '4') {
                $('#mole1').show().delay(300).hide();
                };
            if (randomnumber = '5') {
                $('#mole1').show().delay(300).hide();
                };
            if (randomnumber = '6') {
                $('#mole1').show().delay(300).hide();
                };  
}, 200);

and my html that's relevant:

            <div id="minigameblockholder">
        <div class='moles' id="mole1"> </div>
        <div class='moles' id="mole2"> </div>
        <div class='moles' id="mole3"> </div>
        <div class='moles' id="mole4"> </div>
        <div class='moles' id="mole5"> </div>
        <div class='moles' id="mole6"> </div>

        <div id="scorebord"> </div>

    </div>

I have not started working on my scoreboard yet so don't other correcting that. thanks in advnce, Jasper

Answer 1

Edit

I don't know if you edited your answer, however I can see some things that would prevent it from working.

Your if statements will not work. You are using an assignment operator ("="), this is how you assign variables.

var x = 2; (assign 2 to the variable x)

You need to use "==" (is equal to) operator in comparisons.

if(randomnumber == 2) (if randomnumber is equal to 2)

Orignal Answer

Following on from my comment, I can't see from your codefragment why it isn't working. However, you could try something like the following;

setInterval(function(){
    var randomnumber = 1 + Math.floor(Math.random() * 10);

    $('#mole1').html(randomnumber);

    var mole = $('#mole' + randomnumber);

    if(mole != undefined){
        $('.moles').hide();
        mole.show();
    }
}, 2000)

This creates a random number, attaches it to the id "mole" (eg: mole + 2) and checks to see if it is defined (exists). If it is, it hides all the other moles and shows the selected mole (in our example, 2). This will also get rid of all of the if statements and will allow you to increase or decrease the number of moles without having to create extra checks for them.

You can see it working here https://jsfiddle.net/ezs00xw0/

Note: Ignore the extra html and css, this was for debugging purposes.