Markese P Markese P - 7 months ago 12
Javascript Question

get rid of the text area on a form once clicked

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() ;



}

}

Answer

You are appending the new data to your element with +=, you want to replace the whole innerHTML, so just us the = operator. elErrror.innerHTML += 'Total Cost is $' + price() ; becomes elErrror.innerHTML = 'Total Cost is $' + price() ;

Comments