学习用JS从表单中提取数据

我正在自学Javascript，我第一次尝试应用一些概念，我做了一个基本的数字猜游戏。但我似乎不能让它工作!谁能帮我看看哪里出错了吗?这是非常非常基本的，我相信有一些简单的概念我没有学过或忽略了。

我在试着让用户猜数字6!

var myNum = 6;
var userGuess = document.getElementById("number").value;
if (userGuess == myNum) {
writeMessage('statusArea', '<p>"You guessed my favorite number!"</p>');}
if (userGuess > myNum) {
writeMessage('statusArea', '<p>"Nope, too high, try again!"</p>');}
if (userGuess < myNum) {
writeMessage('statusArea', '<p>"Nope, too low, try again!"</p>');}

<header>Can you guess my favorite number?</header>
<body>
<form><label for="number">Enter a number here:</label><br>
<input type="text" id="number" name="number"><br><input type="submit" value="Guess"></form> 

<div id="statusArea"></div>
</body>

https://codepen.io/The_vagabond_blonde/pen/KKNgOrm

有多重问题。但是当使用提交按钮时，提交的是表单而不是JS代码。因此，您看不到在JS中定义的文本。下面是如何防止这种情况的发生。此外，由于您正在处理数字，您需要使值为数字，因为默认情况下它将是字符串。然后还建议使用===而不是==，如这里所述

var myNum = 6;
document.getElementById('guessNumber').addEventListener('click', function(e) {
e.prevenDefault; // Prevents submitting form
var userGuess = Number(document.getElementById("number").value); // parse value to an actual number instead
if (userGuess === myNum) { // use of === is recommended over == 
writeMessage('statusArea', '<p>You guessed my favorite number!</p>');
}

// as userGuess is now a number you can check if it is more or less than
if (userGuess > myNum) {
writeMessage('statusArea', '<p>Nope, too high, try again!</p>');
}

if (userGuess < myNum) {
writeMessage('statusArea', '<p>Nope, too low, try again!</p>');
}
});
function writeMessage(domId, html)
{
document.getElementById(domId).innerHTML = html
}

<header>Can you guess my favorite number?</header>
<body>
<form>
<label for="number">Enter a number here:</label><br>
<input type="text" id="number" name="number"><br>
<input type="button" id="guessNumber" value="Guess">
</form> 

<div id="statusArea"></div>
</body>

相关内容

最新更新

热门标签：