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 >
                            
  <input  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 >
     <textarea disabled  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

CodePudding user response：

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 >
                            
  <input  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 >
     <textarea disabled  id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea>
 </div>

CodePudding user response：

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 >

  <input  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 >
  <textarea disabled  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

CodePudding user response：

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

CodePudding user response：

Try using the oninput event instead of the onchange event.