Menu
I want to achieve an automatic clear and display another value corresponds to new inputted data
This is my html code for input data and text area
function getInputValue(){
var integer = document.getElementById("integer").value;
var text = document.getElementById("answer");
for (var i = 1; i <= integer; i++) {
if (i % 15 == 0){
text.append( i, "= ","fizzbuzz\n")
}
else if (i % 3 == 0){
text.append( i, "= ","fizz \n")
}
else if (i % 5 == 0){
text.append( i, "= ","buzz \n")
}
else{
text.append(i, "= \n")
}
}
}<div class="form-floating mb-3">
<input class="form-control" id="integer" onChange="getInputValue()" type="text" placeholder="Input an Integer for N" data-sb-validations="required" />
<label for="integer">Input an Integer for N</label>
</div>
<div class="col-lg-6 form-floating answer mb-3">
<textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea>
</div>If you will try to run the snippet you can see that if you will change the value in the input tag the textarea will just stack all the outputs
451
To clear the value of a textarea element, set it's value property to an empty string, e.g. textarea. value = '' . Setting the element's value to an empty string removes any of the text from the element. Here is the HTML for the examples in this article.
From the MDN documentation: " <textarea> does not support the value attribute".
If you need to clear the value of a textarea when a button is clicked, add aclick event listener to the element. The handleClick function from the example gets invoked every time the button is clicked. On each button click, we set the value of the textarea element to an empty string to clear its value.
JavaScript clear text field on click. 1 Use Placeholder. Placeholder is a different attribute than value to input fields type (text, password, email, phone) and also textarea. 2 Inline JavaScript onClick clear text field value. ... 3 Recommended: Clear Input text Field or textarea by calling JavaScript Function. ...
No script needed. You can use onblur and onfocus combined with the placeholder to make the text disappear and appear on the textarea. <textarea onblur="this.placeholder='Write something..'" onfocus="this.placeholder=''" placeholder="Write something.."
You can use onblur and onfocus combined with the placeholder to make the text disappear and appear on the textarea. <textarea onblur="this.placeholder='Write something..'" onfocus="this.placeholder=''" placeholder="Write something.." name="" cols="40" rows="4"></textarea> This solution wipes out the text field every time the user clicks on it.
Because you are using append() always it is always adding to content. Just clear it everytime onChange is triggered so it resets. You can use :
text.innerHTML = '';
function getInputValue(){
var integer = document.getElementById("integer").value;
var text = document.getElementById("answer");
text.innerHTML = '';
for (var i = 1; i <= integer; i++) {
if (i % 15 == 0){
msg = i + "fizzbuzz";
text.append( i, "= ","fizzbuzz\n")
}
else if (i % 3 == 0){
text.append( i, "= ","fizz \n")
}
else if (i % 5 == 0){
text.append( i, "= ","buzz \n")
}
else{
text.append(i, "= \n")
}
}
}<div class="form-floating mb-3">
<input class="form-control" id="integer" onChange="getInputValue()" type="text" placeholder="Input an Integer for N" data-sb-validations="required" />
<label for="integer">Input an Integer for N</label>
</div>
<div class="col-lg-6 form-floating answer mb-3">
<textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
