Hello I am writing pretty much a game of chance with JavaScript and for some reason even when the right answer is given it displays that you lost. I have tried to change the if conditions but am not well versed enough to figure it out. This is my first time asking a question on here if you need anymore info I will supply what I know and if this has been answered already I could not find it or did not recognize it as the answer as like I said I am still pretty new at coding in general.
This is the HTML
<h3>CAN YOU GUESS MY NUMBER!!</h3>
<h4>You get two guess and my number is random every time you try. Goodluck!</h4>
<input type="text" onkeyup="guessOneCheck(this)" placeholder="enter your guess 1-10" id="guessOne" maxlength="2">
<input type="text" onkeyup="guessTwoCheck(this)" placeholder="enter your guess 1-10" id="guessTwo" maxlength="2">
<button id="submit__Guesses" onclick="bothWrong()">SUBMIT GUESSES</button>
<div id="guessAnswer"></div>
<script src="main.js"></script>
This is the javascript
let guessOne = ''
let guessTwo = ''
const guessOneCheck = (g1) => {
guessOne = g1.value
console.log(g1.value)
}
const guessTwoCheck = (g2) => {
guessTwo = g2.value
console.log(g2.value)
}
const bothWrong = () =>{
let randomNum = Math.floor((Math.random() *10) + 1);
console.log(randomNum)
if(guessOne !== randomNum && guessTwo !== randomNum){
document.getElementById('guessAnswer').innerHTML = 'HaHa you lose better luck next time!! My number was' + ' ' + randomNum;
} else if(guessOne == randomNum || guessTwo == randomNum){
document.getElementById('guessAnswer').innerHTML = 'What! No you cheated, or omg are you a psychic!!! My number was' + ' ' + randomNum;
}
}
The error here is this line:
if (guessOne !== randomNum && guessTwo !== randomNum) {
!== is a strict check which compares both value and type. While the value might be right, the type won't be because you are taking guessOne and guessTwo from input fields, which means they are strings - whereas randomNum is of the type Number. You have to cast these into numbers, which you can do like this:
const guessOneCheck = (g1) => {
guessOne = +g1.value
console.log(g1.value)
}
const guessTwoCheck = (g2) => {
guessTwo = +g2.value
console.log(g2.value)
}
It should work fine after that
Your guessOne and guessTwo are strings. If you console.log it you will see e.g. "1". You need to convert string to number using +guessOne and +guessTwo:
if(+guessOne !== randomNum && +guessTwo !== randomNum){
document.getElementById('guessAnswer').innerHTML = 'HaHa you lose better luck next time!! My number was' + ' ' + randomNum;
} else if(+guessOne == randomNum || +guessTwo == randomNum){
document.getElementById('guessAnswer').innerHTML = 'What! No you cheated, or omg are you a psychic!!! My number was' + ' ' + randomNum;
}
There are two solutions to this error.
Do not compare using '===' or '!=='. It leads to type check as well, means if the the entered number is '3' (which is a string type) and your comparison will be with a number 3 resulting in false as type check is happening. Instead use
!= or ==
Convert the entered string into number before comparison, this can be done by Number(enteredNumber)orlet number = +enteredNumber