Quiero lograr un borrado automático y mostrar otro valor que corresponda a los nuevos datos ingresados
Este es mi código html para datos de entrada y área de texto.
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>Si intenta ejecutar el fragmento, puede ver que si cambia el valor en la etiqueta de entrada, el área de texto simplemente apilará todas las salidas.
Debido a que está usando append() siempre, siempre está agregando contenido. Simplemente onChange cada vez que se active onChange para que se reinicie. Puedes usar: 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>Aquí está la solución:
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>Por contexto.
onChange="getInputValue()" en líneaPor lo que puedo ver aquí, no hay una forma de borrar un área de texto sin usar una función de clic.