我有一个我要实现的猜数字游戏。当我的输入字段(由id“输入”标记为空白)...我的清除按钮应被禁用,但我的实现似乎无效,有什么建议吗?
var actualNum = randomNumber();
function randomNumber(){
return Math.floor(Math.random() * 101);
}
function findCorrectGuess(actualNum,userGuess){
actualNum = parseInt(actualNum);
userGuess = parseInt(userGuess);
if(userGuess <= 0 || userGuess > 100){
return "Error: Enter a number between 1 and 100"
} else if(isNaN(userGuess)){
return "Error: Insert an actual number."
} else if(userGuess > actualNum){
return "That is too high!"
} else if (userGuess < actualNum){
return "That is too low!"
} else if (userGuess === actualNum){
return "BOOM!"
}
}
function reset(){
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
}
function clearField(){
document.getElementById('input').value = "";
}
function guessToUI(){
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>${userGuess}</h2><h3>${findCorrectGuess(actualNum,userGuess)}</h3></center>`
}
// function disable(){
// let guessInput = document.getElementById('guesser').value;
// if(guessInput === ''){
// document.getElementById('clear').disabled = true;
// } else {
// document.getElementById('clear').disabled = false;
// }
// }
function listeners(){
let = guessInput = document.getElementById('guesser').value;
if(guessInput == ''){
document.getElementById('clear').disabled = true;
}
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
}
listeners();
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1><center><span id="num">Number</span> <span id="guess">Guesser</span></center></h1>
</header>
<div class="center-block">
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id ="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>
有人可以解释一下实现这一点的逻辑吗?我似乎无法弄清楚。
答案 0 :(得分:0)
修复了您的代码段。您只需要添加以下行:document.getElementById('input').addEventListener('input', disable);
。每次输入更改时,这基本上都会执行功能disable
。
我还建议您使用let input = document.getElementById('input')
为所有重复值创建一个变量,以便您可以轻松访问它。
注意:您还有一些我已解决的错误。
var actualNum = randomNumber();
function randomNumber() {
return Math.floor(Math.random() * 101);
}
function findCorrectGuess(actualNum, userGuess) {
actualNum = parseInt(actualNum);
userGuess = parseInt(userGuess);
if (userGuess <= 0 || userGuess > 100) {
return "Error: Enter a number between 1 and 100"
} else if (isNaN(userGuess)) {
return "Error: Insert an actual number."
} else if (userGuess > actualNum) {
return "That is too high!"
} else if (userGuess < actualNum) {
return "That is too low!"
} else if (userGuess === actualNum) {
return "BOOM!"
}
}
function reset() {
actualNum = randomNumber();
document.getElementById('input').value = "";
el = document.getElementById('player-guess')
el.removeChild(el.firstChild)
}
function clearField() {
document.getElementById('input').value = "";
}
function guessToUI() {
let userGuess = document.getElementById('input').value;
document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>${userGuess}</h2><h3>${findCorrectGuess(actualNum,userGuess)}</h3></center>`
}
function disable() {
let guessInput = document.getElementById('input').value;
if (guessInput === '') {
document.getElementById('clear').disabled = true;
} else {
document.getElementById('clear').disabled = false;
}
}
function listeners() {
let = guessInput = document.getElementById('guesser').value;
document.getElementById('clear').disabled = true;
document.getElementById('guesser').addEventListener('click', guessToUI);
document.getElementById('clear').addEventListener('click', clearField);
document.getElementById('reset').addEventListener('click', reset);
}
document.getElementById('input').addEventListener('input', disable);
listeners();
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1>
<center><span id="num">Number</span> <span id="guess">Guesser</span></center>
</h1>
</header>
<div class="center-block">
<form>
<input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
<button id="guesser" class="btn">Guess</button>
<button id="clear" class="btn">Clear</button>
</form>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
<button id='reset' class="btn">Reset</button>
</footer>
<script src="script.js" async defer></script>
</body>
</html>
答案 1 :(得分:0)
为您的输入添加一个“ onkeyup”事件。
<input id="input" type="number" name="fname" onkeyup="inputChange()" placeholder="Enter your guess">
onkeyup功能
function inputChange()
{
if(document.getElementById('input').value != '')
{
document.getElementById('clear').disabled =false;
}
else{
document.getElementById('clear').disabled = true;
}
}
还可以在清除点击功能上添加禁用清除代码
function clearField(){
document.getElementById('input').value = "";
document.getElementById('clear').disabled = true;
}
通过这种方式,当您的输入字段为空时,清除按钮禁用属性将为true。希望有帮助