Question

这是我第一次使用StackOverflow。我用谷歌搜索了这些问题，无法弄清楚如何将其应用于我的代码。我什至使用过StackOverflow，但我一定缺少一些东西。

我希望count函数在正确猜出的总数上增加尝试次数。
我希望重设按钮基本上可以重新开始所有操作，清空输入等。就像听起来一样。

<html>

<body>
  <label for="red">Guess:</label>
  <input id="guess" type="text" size="40" /> <p id="redv"></p>
  <button onclick="check(); count();"/>Check</button>
  <button onclick="reset()"/>Reset</button>
  <script type="text/javascript">
   theNumber = Math.floor(Math.random()*100)
   tries = []
   check = function() {
       guess = document.querySelector("#guess").value;

       if (guess == theNumber) {
           document.write( "You guessed correctly! " + guess + " in " + tries.length + " tries");
           alert("you are right!")
       } else {
           if (guess < theNumber) {
               document.write("you are too low " + guess.fontcolor("red"));
             document.write(tries);
           } else {
               result = document.write("you are too high " + guess.fontcolor("blue"));
           }
       }
   }
     
     
   count = function() {
       for(var i=0;i<guesses.length;i++){
          writeln("Guess # " + (i+1) + ": " + tries[i].value + " was " + tries[i].direction);
       }

     reset = function() {
       check()
     } 
}
   
   </script>
  </body>
</html>

Answer 1

也许是这样（https://jsfiddle.net/zgp23r8q/20/）

var theNumber = Math.floor(Math.random() * 100)
var tries = [];
var maxTries = 5;

check = function() {
  guess = document.querySelector("#guess").value;

  if (guess == theNumber) {
    document.querySelector("#redv").textContent =
      "You guessed correctly! " + guess + " in " + tries.length + " tries";
  } else if (guess < theNumber) {
    tries.push({
      value: guess,
      direction: "low"
    });
    document.querySelector("#redv").textContent = "you are too low (number of tries: " + tries.length + ")";
  } else {
    tries.push({
      value: guess,
      direction: "high"
    });
    document.querySelector("#redv").textContent = "you are too high (number of tries: " + tries.length + ")";
  }
  if (tries.length >= 5) {
    document.querySelector("#footer").innerHTML = tries.map(function(t, i) {
      return "Guess # " + (i + 1) + ": " + t.value + " (" + t.direction + ")"
    }).join("<br>");
  }

}


reset = function() {
  tries = [];
  document.querySelector("#redv").textContent = "";
  document.querySelector("#footer").innerHTML = "";
}

Answer 2

这是我对您问题的解决方案。试试吧：）

class Guesser {
  constructor(min, max) {
    this.attempts = 0;
    this.rndNumber = Math.floor(Math.random() * (max - min + 1) + min);
  }
  
  // Returns true if answer is correct, otherwise false
  answer(number) { 
    this.increaseAttempts();
    
    const isAnswerCorrect = number === this.rndNumber;
    return isAnswerCorrect;
  }
  
  // Get tip for the user
  getTip(number) {
    return number > this.rndNumber
      ? 'Your number is greater'
      : number < this.rndNumber
        ? 'Your number is less'
        : 'Exactly!';
  }
  
  // Get total attempts
  getAttempts() {
    return this.attempts ;
  }
  
  // Reset counter
  reset() {
    this.attempts = 0;
  }
  
  // Increate counter of attempts
  increaseAttempts() {
    this.attempts += 1;
  }
}

// Get DOM nodes
const inputNode = document.getElementById('number');
const answerButtonNode = document.getElementById('answer');
const resetButtonNode = document.getElementById('reset');
const statusNode = document.getElementById('status');
const tipNode = document.getElementById('tip');
const attemptsNode = document.getElementById('attempts');

// Initialize guesser
const guesser = new Guesser(1, 10);

// Reset all fields after pressing 'Reset' button on UI
const resetForm = () => {
  inputNode.value = '';
  statusNode.value = '';
  tipNode.value = '';
  attemptsNode.value = '';
};

// Check answer, update fields on UI after pressing 'Answer' button
const handleAnswer = (event) => {
  // By default the value of <input type='number'/ > is a string,
  // therefore we should convert it to number
  const number = parseInt(inputNode.value); 
  // Check if answer is correct
  const isCorrect = guesser.answer(number);
  // Get tip for a user
  const tip = guesser.getTip(number);
  // Get user's attempts
  const attempts = guesser.getAttempts();
  
  statusNode.value = isCorrect ? 'Correct' : 'Wrong';
  tipNode.value = tip;
  attemptsNode.value = attempts;
  
  if (isCorrect) {
    // Disable button in case user answers correctly
    answerButtonNode.disabled = true;
  }
};

// Reset form and valuess
const handleReset = (event) => {
  guesser.reset();
  resetForm();
  answerButtonNode.disabled = false;
};


answerButtonNode.addEventListener('click', handleAnswer);
resetButtonNode.addEventListener('click', handleReset);

  <label for="number">Input your number:</label>
  <input id="number" type="number">
  <button id="answer">Answer</button>
  <button id="reset">Reset</button>
  
  <div>
    <div>Is answer correct: <input id="status" type="text" disabled /></div>
    <div>Tip: <input id="tip" type="text" disabled /></div>
    <div>Attempts: <input id="attempts" type="text" disabled /></div>
  </div>

用javascript

2 个答案: