随机数guesser不适用于Javascript

时间:2018-06-03 14:16:57

标签: javascript html css

我有一个数字猜测但它不起作用。有一些例外,有一些未定义的东西。希望你们中的一些人能够帮助我解决这个问题。 我的代码:

var input = document.getElementById("input").value;

function newrandom() {
    
var number = Math.floor(100*Math.random());
}

function check() {
    if (input < number) {
        document.getElementById("uitslag").innerHTML = 'Het is hoger';
        document.getElementById("uitslag").style.color = "red";
    }
    else if (input > number) {
        document.getElementById("uitslag").innerHTML = 'Het getal is lager';
        document.getElementById("uitslag").style.color = "red";
    }
    else (input == number) {
        document.getElementById("uitslag").innerHTML = 'Juist! Het getal was' +number;
        document.getElementById("uitslag").style.color = "green";
        newrandom();
    }

    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Raad het getal</title>
    <script src="rader.js"></script>
</head>
<body onload="newrandom();">
    <h2>Raad het getal!</h2>
    <h3>Het getal is tussen de 0 en 100</h3>
   <label for="input">Your number: </label><input type="text" value="" id="input">
   <button id="check" onclick="check()">Check!</button>
   <button id="new" onclick="newrandom()">New random</button></br>
   <p id="uitslag"></p>
</body>
</html>

更新 评论部分帮助了我,我得到了它的工作。有一些拼写错误和错误,并修复了它们!谢谢您的帮助 代码:

var input = document.getElementById("input").value;

function newrandom() {
number = Math.floor(100*Math.random());
}

function check() {
if (input == number) {
    document.getElementById("uitslag").innerHTML = 'Juist! Het getal was' +number;
    document.getElementById("uitslag").style.color = "green";
}
else  {
    document.getElementById("uitslag").style.color = "red";
    if (input < number) {
        document.getElementById("uitslag").innerHTML = 'Het is hoger';
    }
    else {
        document.getElementById("uitslag").innerHTML = 'Het getal is lager';
    }
}
}

newrandom();

5 个答案:

答案 0 :(得分:1)

你错过了if after last else。把它放在那里它应该工作。

URL search param v

你也可以编写如下程序。很少和干净的代码。

URL search param

为了更好的可读性,您可以按照函数/变量名称的较低驼峰大小写。例如,var input = document.getElementById("input").value; function newrandom() { number = Math.floor(100*Math.random()); } function check() { if (input < number) { document.getElementById("uitslag").innerHTML = 'Het is hoger'; document.getElementById("uitslag").style.color = "red"; } else if (input > number) { document.getElementById("uitslag").innerHTML = 'Het getal is lager'; document.getElementById("uitslag").style.color = "red"; } else if (input == number) { document.getElementById("uitslag").innerHTML = 'Juist! Het getal was' +number; document.getElementById("uitslag").style.color = "green"; } } newrandom(); 代替var input = document.getElementById("input").value; function newrandom() { number = Math.floor(100*Math.random()); } function check() { if (input == number) { document.getElementById("uitslag").innerHTML = 'Juist! Het getal was' +number; document.getElementById("uitslag").style.color = "green"; } else { document.getElementById("uitslag").style.color = "red"; if (input < number) { document.getElementById("uitslag").innerHTML = 'Het is hoger'; } else { document.getElementById("uitslag").innerHTML = 'Het getal is lager'; } } } newrandom();

答案 1 :(得分:0)

这里的工作解决方案 -

&#13;
&#13;
var number = 0;

function newrandom() {
  number = Math.floor(100 * Math.random());
}

function check() {
  input = document.getElementById("input").value;
  console.log(input, number);
  if (input < number) {
    document.getElementById("uitslag").innerHTML = 'Het is hoger';
    document.getElementById("uitslag").style.color = "red";
  } else if (input > number) {
    document.getElementById("uitslag").innerHTML = 'Het getal is lager';
    document.getElementById("uitslag").style.color = "red";
  } else {
    document.getElementById("uitslag").innerHTML = 'Juist! Het getal was' + number;
    document.getElementById("uitslag").style.color = "green";
    newrandom();
  }
}

newrandom();
&#13;
<h2>Raad het getal!</h2>
<h3>Het getal is tussen de 0 en 100</h3>
<label for="input">Your number: </label><input type="text" value="" id="input">
<button id="check" onclick="check()">Check!</button>
<button id="new" onclick="newrandom()">New random</button><br/>
<p id="uitslag"></p>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您应该将数字变量定义为全局,例如&#34; var input = ...&#34;否则您无法访问数字变量。

答案 3 :(得分:0)

我删除了错误,下面是代码:

var input;
var number;
function newrandom() {

number = Math.floor(100*Math.random());

}

function check() {
    input = document.getElementById("input").value;
    if (input < number) {
        document.getElementById("uitslag").innerHTML = 'Het is hoger';
        document.getElementById("uitslag").style.color = "red";
    }
    else if (input > number) {
        document.getElementById("uitslag").innerHTML = 'Het getal is lager';
        document.getElementById("uitslag").style.color = "red";
    }
    else if (input == number) {
        document.getElementById("uitslag").innerHTML = 'Juist! Het getal was' +number;
        document.getElementById("uitslag").style.color = "green";
        newrandom();
    }

}

希望这能解决您的问题。 如果您有任何疑问,请与我们联系。

答案 4 :(得分:0)

您可以翻译您的代码(我已经代码kunnen vertalen)。不要使用内联处理(&#39; onclick&#39;等);它不安全,并产生了一个新的js解释器。

无论如何,有很多方法可以解决这个问题,其中之一就是其中之一。随便使用它。尝试学习ES6,它就在这里。

&#13;
&#13;
// use an anonymous method to avoid polluting the global namespace
( () => {
  // not too many possibilities for development purposes
  let someRandomNumber = Math.floor(1 + Math.random() * 10);
  const result = document.querySelector("#result");
  const guessResult = {
    n: 0, 
    get result() { return this.n > 3 
      ? "Amazing, you guessed it (took a while though ;)!" 
      : "Amazing, you guessed it - that was quick!"; 
    },
  };
  // add a click handler to the button
  document.querySelector("#check").addEventListener("click", guessMe);
  
  function guessMe(evt) {
    // + tries converting the input to a Number
    const guessedValue = +document.querySelector("#val").value;
    const guessed = guessedValue === someRandomNumber;
    guessResult.n += 1;
    // report result
    result.innerHTML = isNaN(guessedValue) || guessedValue > 9 || guessedValue < 1
      ? "Invalid value, try again"
      : guessed
        ? `${guessResult.result}. We created a new number to guess now`
        : "Sorry, try again";
    // redo the number if the user guessed right
    if (guessed) {
      someRandomNumber = Math.floor(1 + Math.random() * 10);
      guessResult.n = 0;
    }
  }
} )();
&#13;
<h2>Guess a number between 1 and 10</h2>
<label for="val">Your number:</label>
<input type="number" id="val" min="1" max="9">
<button id="check">Check!</button>
<p id="result"></p>
&#13;
&#13;
&#13;

相关问题