I am making a chrome extension. I want to update a h3 element in popup.html with some text after click a submit button with id 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);
The function populates the element with the text, and I see the text, but it disappears immediately, within some microseconds. Where I am going wrong ?
For me its' working fine. You can refer the following code snippet
<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>
The form refreshes the page by default upon submission, due to which the populated text vanishes. Just add an event listener to disable it, which keeps the DOM intact.
var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('submit', handleForm);