get rid of the text area on a form once clicked
Question
my javascript gives a estimate for name plates each letter is $10
Very new to Javascript, I am trying to get rid of the text Area on my input/display once the submit/button is clicked. . . . lets just say if I want to re-enter an input it should clear the last input and give new price . . . right now is piling up
for example : Enter Name: Total Cost is $30Total Cost is $60Total Cost is $60Total Cost is $90Total Cost is $110Total Cost is $140
<body>
<div id='container' >
<div id='banner'>
<h4 id='signName'>Name Plate Estimate</h4>
</div>
<p id="enterName">Enter Name: </p>
<div id='form'>
<form>
<input id="userInput" name="userInput" type="text" />
<br>
</form>
</div>
<button id="button">Show Cost</button>
</div>
</body>
heres my javascript ;
document.getElementById('button').onfocus = function(){
var userText = document.getElementById('userInput').value ;
var cost = 10 ;
var price = function(){
var total = userText.length * cost;
return total ;
}
if (userText.length === 0){
var elError = document.getElementById('enterName') ;
elError.innerHTML += "Please enter a valid name" ;
} else {
var elErrror = document.getElementById('enterName') ;
elErrror.innerHTML += 'Total Cost is $' + price() ;
}
}
2 answers
solution1
4 ACCPTED 2016-05-03 08:33:36
You are appending the new data to your element with += , you want to replace the whole innerHTML, so just use the = operator.
elErrror.innerHTML += 'Total Cost is $' + price() ;
becomes
elErrror.innerHTML = 'Total Cost is $' + price() ;
solution2
0 2016-05-03 08:49:56
Please add below script:
document.getElementById('userInput').onfocus = function(){
document.getElementById('userInput').value = ''
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.