我正在尝试将随机生成的数字与用户输入的数字(通过 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();
它没有按您期望的方式工作,因为您的提交按钮没有执行任何操作,而且您实际上是在页面加载时调用您的函数。 删除 JavaScript 的最后一行,即对
的调用game();
将您的提交按钮更改为此
<input type=button onclick=game(); class=submit value=Submit>
移除封口
</form>
标签,因为您没有打开表格,但您不需要。
还可以获取输入的号码
var user = parseFloat(document.getElementById("userinput").value);
由于js不像jquery一样在id之前使用hash,并且表单值在解析之前都是字符串。
您需要使用事件处理程序,以便在提交表单时调用您的函数,如下所示:
document.getElementById('myform').addEventListener('submit', function(e){
var user = document.getElementById("userinput").value;
game(user, computer);
e.preventDefault();
});
我在 this JSFiddle 中修复了你的代码。
我正在编写整个代码希望你能明白。
<!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>
您是否尝试过添加一个
addEventListener
,这样您的 Javascript 代码将仅根据设置的条件执行一次。您似乎还缺少顶部标签来将您想要的所有 HTML 放置在表单中。
这是示例:
var computer = Math.floor(Math.random()*100);
var user = document.getElementById("#userinput");
form.addEventListener('submit' => {
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();