Jump to content

How do you clear input text box?


Recommended Posts

<!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.

post-173058-0-44452900-1401600043_thumb.png

Edited by nhuyvan1106
Link to post
Share on other sites

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 by Don E
  • Like 1
Link to post
Share on other sites

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 = "";}
  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...