Estoy haciendo una extensión de Chrome. Quiero actualizar un elemento h3 en popup.html con algo de texto después de hacer clic en un botón de envío con id de submit .
<!-- popup.html --> <div class="row"> <h3 id="status"></h3> </div> // popup.js function saveClass() { var status = document.getElementById('status') status.innerText = 'success'; } document.getElementById("submit").addEventListener("click", saveClass);La función rellena el elemento con el texto y veo el texto, pero desaparece inmediatamente, en unos microsegundos. ¿Dónde me estoy equivocando?
Para mí está funcionando bien. Puede consultar el siguiente fragmento de código
<html> <body> <!-- popup.html --> <div class="row"> <h3 id="status"></h3> </div> <button id="submit">Submit</button> <!-- popup.js --> <script> function saveClass() { var status = document.getElementById('status') status.innerText = 'success'; } document.getElementById("submit").addEventListener("click", saveClass); </script> </body> </html>El formulario actualiza la página de forma predeterminada al enviarlo, por lo que el texto completo desaparece. Simplemente agregue un detector de eventos para deshabilitarlo, lo que mantiene intacto el DOM.
var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm);