A simple guess the number game where the user's input is stored in userNum using document.getElementById("inputField").value - All other parts of the program are responding well except for retrieving the data from the input. It keeps coming back as either NaN, empty, undefined, or other similar values.
const userNum = document.getElementById("inputField").value;
const button = $('#submitButton');
const computerNum = Math.floor(Math.random() * 10) + 1;
let tries = 0;
button.on("click", checkTries);
function checkTries(){
if(tries < 3){
enterGuess()
}
else if(tries === 3){
alert("Sorry - your tries are up!");
}
}
function enterGuess(){
tries = tries + 1;
console.log(`You have had ${tries} tries`);
console.log(`You chose ${userNum}`);
console.log(`Computer chose ${computerNum}`);
if(userNum === computerNum){
console.log("You won!")
}
else if(userNum > computerNum){
console.log("Your guess is too high")
}
else if(userNum < computerNum){
console.log("Your guess is too low")
}
}/* no CSS yet */<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>webpage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="centerIt">
<h1>Guess the Number</h1>
<input type ="number"id="inputField"/>
<button type="submit"id="submitButton">Guess</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>