CODEWITHSUNDEEP
javascripthtmlcss
aftershock
aftershock

Reputation: 67

Random number guesser won't work with Javascript

I have a number guesser but it doesn't work. There are a few exceptions and there are a few things undefined. Hopefully some of you is able to help me to fix this. My code: 

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>

UPDATE The comment section helped me out and I got it working. There were some few typos and errors and got them fixed! Thank you for your help The code:

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();

Upvotes: 0

Views: 118

Answers (5)

Mishel Tanvir Habib
Mishel Tanvir Habib

Reputation: 1142

You have missed the if after last else. Put it there and it should work.

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();

Also you could've write the program as below. lot less and clean code.

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();

For better readability you can follow the lower camel case for the functions/variables name. Ex, newRandom() instead of newrandom().

Upvotes: 1

KooiInc
KooiInc

Reputation: 122936

You could've translated your code (je had de code kunnen vertalen). Don't use inline handling ('onclick' etc); it's unsafe and spawns a new js interpreter.

Anyway, there are many ways to resolve this, here's one of them. Use it as you please. Try studying ES6, it's here to stay.

// 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;
    }
  }
} )();
<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>

Upvotes: 0

Meghna
Meghna

Reputation: 1

I have removed errors and below is the code:

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();
    }

}

Hope this solves your problem. Let me know if you have any queries.

Upvotes: 0

Yunus
Yunus

Reputation: 1

You should define number variable as global like "var input = ...", otherwise you can't access number variable.

Upvotes: 0

Vivek
Vivek

Reputation: 1513

Here's working solution -

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();
<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>

Upvotes: 0

Related Questions