Is there anyway to clear a textarea without using an onclick function?

user_17689907 0
Viewed 109

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

css html javascript
4 Answers

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>

user_101401240

Here is the solution:

let inputEl = document.querySelector('#integer')
let answerEl = document.querySelector('#answer')
inputEl.addEventListener('input', () => {
  answerEl.value = ''
  if (inputEl.value !== '') {
    answerEl.value = getInputValue()
  }
})

function getInputValue() {
  var integer = inputEl.value;
  var text = '';

  for (var i = 1; i <= integer; i++) {
    if (i % 15 == 0) {
      text += i +"= fizzbuzz\n"
    } else if (i % 3 == 0) {
      text += i +" = fizz \n"
    } else if (i % 5 == 0) {
      text += i +" = buzz \n"
    } else {
      text += i +" = \n"
    }
  }

  return text
}
<div class="form-floating mb-3">

  <input class="form-control" id="integer" 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>

For context.

  1. Remove the inline onChange="getInputValue()"
  2. Setup getInputValue as a return type
  3. Check if input is empty else run function
user_31595290

As far as I can see here, there isn't a way to clear a textarea without using an onclick function.

user_176899340

Try using the oninput event instead of the onchange event.

user_175038720
Related