连接HTML和Javascript_Javascript_Html

连接HTML和Javascript

javascript html

连接HTML和Javascript,javascript,html,Javascript,Html,我最近刚开始接触HTML/CSS和Javascript。我正在为一个石头剪刀游戏制作一个网站，但首先我想确保我为这个游戏编写的代码有效（我现在正在使用JSbin来运行它）。当我使用prompt（）进行输入时，javascript工作正常。然后我环顾四周，想找到一种方法，这样人们就可以在一个框中输入他们的选择，然后把它作为输入。我当前的HTML代码如下所示： <!DOCTYPE hmtl> <html> <center> <title>Rock Pa

我最近刚开始接触HTML/CSS和Javascript。我正在为一个石头剪刀游戏制作一个网站，但首先我想确保我为这个游戏编写的代码有效（我现在正在使用JSbin来运行它）。当我使用prompt（）进行输入时，javascript工作正常。然后我环顾四周，想找到一种方法，这样人们就可以在一个框中输入他们的选择，然后把它作为输入。我当前的HTML代码如下所示：

<!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>


石头剪子布
欢迎使用JavaScript石头剪刀！请键入您的选择，然后按“继续”
走！

我的javascript如下所示：

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);

var input=document.getElementById（“input”）.value；
var userChoice=input.toLowerCase（）；
var cpuChoice=Math.random（）；
如果（cpuChoice<0.34）{
cpuChoice=“岩石”；
}
否则，如果（cpuChoice如您所见，假设函数命名正确，代码工作正常

我添加了以下内容：
function game() {
    ....
}

还要注意，fiddle被设置为在文档头中加载脚本
注意：使用选择框可能会更好：

针对你的评论：
<head>
    <link rel="stylesheet" type="text/css" href="my-css-file.css"></link>
    <script src="my-js-file.js"></script>
</head>



这假设所有3个文件都在同一目录中。请阅读其他场景的相对URL路径。
您调用函数game（）
用你的按钮，但我看不到这样的函数定义。你的html中缺少你的头部和身体。你还需要在你的页面中包含javascript。你能添加到你的JSBin的链接吗？CodeCademy，我也遵循了这门课程！你在html中引用游戏（）
，但在javascript中没有函数游戏（）
。我记得函数game（）
是运行整个javascript代码的函数，所以在所有代码的顶部添加该函数，并在底部关闭它。谢谢！这在我使用jsbin时修复了它。如果我有3个notepad++文件，你知道如何运行它吗？一个用于HTML，一个用于CSS，一个用于js？