Tengo esta función que usa innerHTML para insertar html en un div :
function displayInputIntro() { var submitbutton = document.getElementById('submitbutton') var intro = document.getElementById('Intro') var introNewSection = document.getElementById('intro-row') var uniqueID = "" var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; var length = 7 for (var i = length; i > 0; --i) uniqueID += chars[Math.floor(Math.random() * chars.length)]; uniqueID = uniqueID introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id=' + uniqueID + '><div class="card z-index-2"> <div class="card-body p-3" style="margin-top: -20px;"> <h6 class="ms-2 mt-4 mb-0">Intro <a href="#" onclick="javascript:deleteInput(' + uniqueID + ')" style="text-align: right; float: right; margin-right: 12px;"><i class="fa fa-times" style="color: gray;"></i></a></h6> <p class="text-sm ms-2">Section 1</p> <div class="container border-radius-lg"> <div class="row"> <textarea type="text" class="form-control" name="intro" placeholder="Enter your current Intro" id="textvalue" style="height: 100px;" required></textarea> </div> </div> </div> </div></div>' submitbutton.style.display = '' } y luego mi html :
<div class="row mt-4" id="intro-row"></div> sin embargo, como puede ver en introNewSection.innerHTML , tengo un <textarea type="text" class="form-control" name="intro" placeholder="Enter your current Intro" id="textvalue" style="height: 100px;" required></textarea>
el problema es que esta función displayInputIntro() puede activarse varias veces. Cada vez que se activa y hay texto dentro del área de texto, simplemente lo borra y no sé por qué. ¿Cómo puedo arreglar esto?
Lo primero que necesita para cerrar las etiquetas HTML correctamente, no se cierra correctamente, veo que no tiene una etiqueta de cierre al asignar html a innerHTML. Lo segundo, siempre que esté usando innerHTML, anulará el contenido html. Si desea inyectar el html, use la etiqueta insertAdjacentHTML y ejecútelo como se muestra a continuación
introNewSection.insertAdjacentHTML('afterend', 'additional HTML code');Nota: debe averiguar por qué la función se activa varias veces.