Question

im just starting out with javascript so go ez on me. i have an exercise where i have to create 4 divs that are a box’s. and each time you refresh the page one div is the correct one to select. the main question im wondering is how can match a div to random number ?

my divs in the html are as follows

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

for javascript all i have so far is

var randomNumber = Math.ceil(Math.random()*4);

but im not sure how i can make a function to say if randomNumber == div# ? then do this.

Answer 1

All right so you have four divs as you explained. We’re going to want to add code to them that processes the user’s clicks so we’ll add what’s called an event handler to them.

<div id="div1" onclick="process(1)"></div>
<div id="div2" onclick="process(2)"></div>
<div id="div3" onclick="process(3)"></div>
<div id="div4" onclick="process(4)"></div>

Now in a script tag above these divs in the code put the following function:

function ( divNum ) {
    // Define box as the div on which the user clicked
    var box = document.getElementById('div' + divNum);

    // Compare the div the user clicked on to the random number
    if ( divNum === randomNumber ) {
        // The user chose right
        box.style.backgroundColor = "black";
    }
    else {
        // The user chose incorrect
        box.style.backgroundColor = "red";
    }
}