javascript简单的随机游戏

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

document.getElementById('div' + randomNumber);

That should do it. Then you can set all the properties on the element that you need from there.

---

If you need to do anything complicated, I would take a different approach, make the divs of a specific class to select from, and utilize jQuery. This was asked last week, and you can find my answer that also applies to your specific question here: https://stackoverflow.com/a/9450352/362536

Answer 2

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";
    }
}