Connecting HTML and Javascript

Question

I just recently got into HTML/CSS and Javascript. I am making a website for a rock paper scissors game but first wanted to make sure that the code I had written for the game worked (I'm using JSbin to run it for now). The javascript worked fine when I had the input using prompt(). I then looked around to find a way to make it so that people could type their choice into a box and then have that be the input. My current HTML code looks like this:

<!DOCTYPE hmtl>
<html>
<center>
<title>Rock Paper Scissors</title>
<p1>Welcome to <em>JavaScript</em> Rock-Paper-Scissors! Please type your choice and press continue</p>
<input type="text" id="input"/>
<button onclick="game();">Go!</button>
</center>
</html>

My javascript looks like this:

var input = document.getElementById("input").value;
var userChoice = input.toLowerCase();
var cpuChoice = Math.random();
if (cpuChoice < 0.34) {
    cpuChoice = "rock";
}
else if (cpuChoice <= 0.67) {
    cpuChoice = "paper";
}
else {
    cpuChoice = "scissors";
}

var compare = function(choice1, choice2) {
    if (choice1 === choice2) {
        confirm("It's a tie!");
    }
    else if (choice1 === "rock")  {
        if (choice2 === "scissors") {
            confirm("You Win!");
        }
        else {
            confirm("You lost");    
        }
    }
    else if (choice1 === "paper") {
        if (choice2 === "rock") {
            confirm("You Win!");
        }
    else {
            confirm("You lost");    
        }
    }
    else if (choice1 === "scissors") {
        if (choice2 === "paper") {
            confirm("You Win!");
        }
        else {
            confirm("You lost");
        }
    }
    else {
        confirm("I'm sorry, that isn't an option. Please try again");
    }
};
compare(userChoice, cpuChoice);

I ran the javascript through JSHint and fixed all the errors that It pointed out, put it back into JSbin but it still didn't work. I'm sure that I'm making a really stupid mistake but any help would be greatly appreciated.

You call a function game() with your button but I see no such function defined. — j08691
– j08691, Commented Apr 29, 2014 at 21:10
CodeCademy, I've also followed this course! You refer to game() in your HTML but in the Javascript there is no function game(). I remember that the function game() is the function to run the entire javascript code, so add that function at the top of everything and close it at the bottom of everything. — Daan
– Daan, Commented May 1, 2014 at 13:57

isherwood · Accepted Answer · 2014-05-01 13:53:20Z

1

As you can see, your code works fine assuming your function is named properly.

http://jsfiddle.net/isherwood/R5GmH/

I've added the following:

function game() {
    ....
}

Also note that the fiddle is set to load the script in the document head.

P.s. This might work better with a select box: http://jsfiddle.net/isherwood/R5GmH/4

In response to your comment:

<head>
    <link rel="stylesheet" type="text/css" href="my-css-file.css"></link>
    <script src="my-js-file.js"></script>
</head>

This assumes that all 3 files are in the same directory. Read up on relative URL paths for other scenarios.

edited May 1, 2014 at 13:53

answered Apr 29, 2014 at 21:23

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3586967 Over a year ago

Thanks! that fixed it for when I'm using jsbin. do you know how to run it if I have 3 notepad++ files? one for HTML, one for CSS and one for js?

Collectives™ on Stack Overflow

Connecting HTML and Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related