禁用/启用按钮中的逻辑

问题描述 投票：0回答：2

我有一个我试图实现的猜测游戏。当我的输入字段，由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>

有人可以解释实现这个的逻辑吗？我似乎无法弄清楚这一点。

javascript dom
2个回答
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>
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。希望这有帮助

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.