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.
Por lo que puedo ver aquí, no hay una forma de borrar un área de texto sin usar una función de clic.
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>Intente usar el evento oninput en lugar del evento onchange .
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ínea