Question

我正在尝试将随机生成的数字与用户输入的数字进行比较（通过HTML中的表单）。 JavaScript函数在加载页面时立即执行，而不是等待用户在表单中输入数字。表单输入似乎也没有做任何事情。

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<title>Hot Or Cold</title>
<script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div id="gameBox">
<p>Enter a number between 1 and 100</p>
<input type="text" name="userinput" id="userinput" maxlength="3" autocomplete="off"/>
<input type ="submit" name="submit" id="submit" class="button"/>
</div>
</form>
</body>
</html>

和我的JavaScript代码：

var computer = Math.floor(Math.random()*100);

var user = document.getElementById("#userinput");

function game(user, computer){
    if (user == computer) {
        alert("You picked the correct number!");
    }
    else if (user > computer) {
        alert("Too high.");
    }
    else if (user < computer) {
        alert("Too low.");
    }
}

game();

Answer 1

它没有按预期工作，因为你的提交按钮没有做任何事情，而你实际上是在页面加载时调用你的函数。删除我们的JavaScript的最后一行，即对

的调用

game();

将提交按钮更改为此

<input type=button onclick=game(); class=submit value=Submit>

删除结束

</form>

标签，因为你没有开放形式，但你不需要一个。

同时获取输入数字

var user = parseFloat(document.getElementById("userinput").value);

因为js不像jquery那样在id之前使用hash，并且表单值都是字符串，直到它们被解析。

Answer 2

您需要使用事件处理程序，以便在提交表单时调用您的函数，如下所示：

document.getElementById('myform').addEventListener('submit', function(e){
    var user = document.getElementById("userinput").value;

    game(user, computer);

    e.preventDefault();
});

我已将您的代码修改为this JSFiddle。

Answer 3

我写完整个代码，希望你能得到它。

<!DOCTYPE html>
<html>
<head>
<body>
<h1> Game </h1>
<input type="number" id="id1">
<button type="button"
onclick=" game()">
Click me.</button>

<script>
var computer = Math.round(Math.random()*100);
console.log(computer);
var user=document.getElementById('id1').value;
function game(){
if(user == computer)
{
alert("yay! Good Work");
}
else{
alert("Sorry Not Matched");
}
}
</script>
</body>
</head>
</html>

javascript表单/将随机生成的数字与用户输入进行比较

3 个答案: