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

Question

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

Answer 1

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>