尝试自己制作纸，石头，剪刀游戏

Question

I am a javascript and jQuery beginner (as in barely a week in), and I need some experienced people to tell me what's wrong with this code. Clicking a div does nothing. I could google for hours, but you guys could probably see the issue(s) way quicker, and I'll be able to learn from the mistake(s) and move on. In my code, I replaced the very last command with "console.log" and copy/pasted everything into textedit to see if it would give me "answer" in the console when I clicked. But I got nothing. Thank you guys ahead of time.

My code is here .

... and here

var box = "div";

$(document).ready(

function () {
    $(box).fadeTo(1000, 0.8);
});



$(box).click(

function () {
    var userchoice = this.id;
    var answer;
    var computerchoice = Math.floor(Math.random() * 3 + 1);

    if (computerchoice === 1) {
        computerchoice = "rock";
    }

    if (computerchoice === 2) {
        computerchoice = "paper";
    }

    if (computerchoice === 3) {
        computerchoice = "scissors";
    }

    if (userchoice === computerchoice) {
        answer = "It's a tie.";
    }
    if (userchoice === "rock") {
        if (computerchoice === "paper") {
            answer = "Computer Wins with " + computerchoice + ".";
        } else {
            answer = "You win with " + userchoice + ".";
        }
    }
    if (userchoice === "paper") {
        if (computerchoice === "scissors") {
            answer = "Computer Wins with " + computerchoice + ".";
        } else {
            answer = "You win with " + userchoice + ".";
        }
    }
    if (userchoice === "scissors") {
        if (computerchoice === "rock") {
            answer = "Computer Wins with " + computerchoice + ".";
        } else {
            answer = "You win with " + userchoice + ".";
        }
    }
    document.getElementById("header").innerHTML(answer);
});

Answer 1

If you check your browser's JS console you'll see this error:

Uncaught TypeError: Property 'innerHTML' of object #<HTMLHeadingElement> is not a function 

This is telling you that .innerHTML is a property that you would assign a value to, not a function to be called, so you need to change this line:

document.getElementById("header").innerHTML(answer);

to:

document.getElementById("header").innerHTML = answer;

Demo: http://jsfiddle.net/CUTez/15/

But since you're using jQuery, you can do this:

$("#header").html(answer);

Note also that if you run the same code outside jsfiddle you will need to move the $(box).click(...) code inside the document ready handler, or put the whole script element at the end of your page just before the closing </body> tag, otherwise the $(box) part won't find any elements because they won't have been parsed yet. (It works in the fiddle because by default jsfiddle puts all of the code in an onload handler.)