nhuyvan1106 Posted June 1, 2014 Share Posted June 1, 2014 (edited) <!DOCTYPE html><html lang = "en-US"> <head> <meta charset = "UTF-8"> <style type = "text/css"> fieldset { width: 850px; margin: auto; text-align: center; } #txtField { text-align: center; } #tryAgainBtn { display: none; } </style> <script type = "text/javascript"> window.onload = myFunction; var randomNumber; var outPut; function myFunction() { randomNumber = Math.floor(Math.random()*1000); document.getElementById("checkBtn").onclick = checkAnswer; document.getElementById("tryAgainBtn").onclick = tryAgain; } function checkAnswer() { outPut = document.getElementById("outPut"); outPut.innerHTML = ""; var myInput = document.getElementById("txtField"); if (myInput.value < 0 || myInput.value > 1000) { return outPut.innerHTML += "I said between 0 and 1000."; } if (myInput.value == "") { return outPut.innerHTML += "Please enter a number between 0 and 1000!!!"; } if (myInput.value > randomNumber) { outPut.innerHTML += "Too High !!!"; } if (myInput.value < randomNumber) { outPut.innerHTML += "Too low !!!"; } if (myInput.value == randomNumber) { outPut.innerHTML += "Yay, you are awesome !!!"; document.getElementById("tryAgainBtn").style.display = "inline"; } document.getElementById("txtField").onclick = reset(); } function tryAgain() { document.getElementById("txtField").value = ""; outPut.innerHTML = ""; document.getElementById("tryAgainBtn").style.display = "none"; randomNumber = Math.floor(Math.random()*1000); } </script> </head> [attachment=1390:MyGame.png]<body> <form action = " " id = "myForm"> <fieldset> <p>Let's play a guessing game, I am thinking about a number between 0 and 1000. Enter your guess in the box, I'll tell you if it's correct or not. </p> <div id = "outPut"> </div> <input type = "text" id = "txtField"/> <br/> <button type = "button" id = "checkBtn"> Check your guess!!! </button> <br/> <button type = "button" id = "tryAgainBtn"> Try again ??? </button> </fieldset> </form> </body></html> Hi guys, I am building this text-based guessing game(please don't judge, I'm just a starter), everything is working correctly, just one thing I can't find the answer anywhere at all, but I sure know you guys do know the answer, my question is, btw, I've attached a picture so you can conjure up what I am trying to say, ok, so, after the user entered a value, and they are gonna enter another value, so when the user clicks on the box, what do I do to make the previously entered value removed, like when they click on the box, the previous value disappears, I've tried using the reset() method as you can see in the code, but every time the "Check your answer" button is clicked, the value disappears right away, and that is not I want, I really don't know method to use? any suggestions are greatly appreciated. Thank you very much for your time and help. Edited June 1, 2014 by nhuyvan1106 Link to comment Share on other sites More sharing options...
Don E Posted June 1, 2014 Share Posted June 1, 2014 (edited) You can reset the form with: document.getElementById("myForm").reset(); instead of this: document.getElementById("txtField").onclick = reset(); reset() is only for forms I believe. Or... within the if statements that check the input from the user... take the value for the input field and set it to blank like the following when they don't guess correctly: var myInput = document.getElementById("txtField"); if (myInput.value < 0 || myInput.value > 1000) { myInput.value = ''; return outPut.innerHTML += "I said between 0 and 1000."; } if (myInput.value == "") { return outPut.innerHTML += "Please enter a number between 0 and 1000!!!"; } if (myInput.value > randomNumber) { myInput.value = ''; outPut.innerHTML += "Too High !!!"; } if (myInput.value < randomNumber) { myInput.value = ''; outPut.innerHTML += "Too low !!!"; } Edited June 1, 2014 by Don E 1 Link to comment Share on other sites More sharing options...
Ingolme Posted June 1, 2014 Share Posted June 1, 2014 Remember that when assigning event handlers, you don't use brackets (), as that would call the function immediately. element.onclick = reset; In your code there isn't a function called "reset" defined, but you could define it as this: function reset() { document.getElementById("txtField").value = "";} 1 Link to comment Share on other sites More sharing options...
nhuyvan1106 Posted June 2, 2014 Author Share Posted June 2, 2014 Thank you Don. Yes, I have thought about that, but it is too superfluous. Ingolme's idea is really awesome. That's what I was trying to look for. Excellent. Thank you so very much guys. Your help and time are not forgotten. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now