css - Javascript: Taking a specific action on reaching a number -
i'm learning javascript, , decided try out simple guessing game thing. code have @ moment:
the html:
<!doctype html> <html> <head> <title>guessing game</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <link href='https://fonts.googleapis.com/css?family=open+sans:400italic' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=roboto' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="guessing_game.css"> </head> <body> <h1>welcome guessing game</h1> <p>you have guess number within 5 attempts, luck!</p> <p>enter number:</p> <input type="text" id="number" placeholder="enter number"></br> <input type="submit" id="submit" value="guess!"></br> <aside> <div id="counter"> <p>remaining guesses</p> </div> <p id="remaining"></p> </aside> <div id="result"></div> <script type="text/javascript" src="guessing_game.js"></script> </body> </html> the js:
var guesses = 5; function guess() { var elguess = document.getelementbyid("remaining"); var elresult = document.getelementbyid("result"); /* if(guesses === 0) { elresult.innerhtml = "<p>sorry, ran out of guesses! better luck next time.</p>"; return; }*/ if(guesses > 0) { guesses--; elguess.textcontent = guesses; //random number var secret = math.floor(math.random() * 10 + 1); var eluserguess = document.getelementbyid("number"); var userguess = parseint(eluserguess.value); if(userguess == secret) { elresult.textcontent = "congrats! did it"; } else { elresult.textcontent = "sorry, please try again."; } } else { elresult.textcontent = "sorry, ran out of guesses."; } } var elsubmit = document.getelementbyid("submit"); elsubmit.addeventlistener("click", guess, false); and css:
body { font-family: 'roboto', sans-serif; } aside { position: relative; top: -150px; width: 300px; height: 600px; float: right; border-left: 2px solid gray; } #counter p{ position: absolute; top: 120px; width: 140px; left: 60px; border-top: 2px solid brown; text-align: center; border-bottom: 2px solid brown; padding: 5px; } #remaining { font-size: 220%; text-align: center; font-family: arial, verdana, serif; position: absolute; top: 170px; border-bottom: 1px solid green; padding: 2px; left: 130px; color: #ff2400; } #result { font-family: 'open sans', sans-serif; text-align: center; font-size: 1.2em; letter-spacing: 0.9em; color: gray; } what looking - number of guesses reach 0, result should display you're out of guesses. i've managed validate guesses counting down 0 (not going negative). tried using if statement check if guesses out, set result accordingly , return. apparently, return reached, control exits method. didn't know happen inside if that's never reached.
either way, how modify code such result set guesses left hit zero?
remember variable guesses might not displaying on remaining element, should decrement variable before condition.
var guesses = 5; function guess() { var elguess = document.getelementbyid("remaining"); var elresult = document.getelementbyid("result"); if (guesses===0){ return; } guesses--; elguess.textcontent = guesses; if(guesses > 0) { var secret = math.floor(math.random() * 10 + 1); var eluserguess = document.getelementbyid("number"); var userguess = parseint(eluserguess.value); if(userguess == secret) { elresult.textcontent = "congrats! did it"; } else { elresult.textcontent = "sorry, please try again."; } } else { elresult.textcontent = "sorry, ran out of guesses."; } } var elsubmit = document.getelementbyid("submit"); elsubmit.addeventlistener("click", guess, false);
Comments
Post a Comment