Update DOM of popup.html after clicking button-CodePudding

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 >
  <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 ?

CodePudding user response：

For me its' working fine. You can refer the following code snippet

<html>

<body>
    <!-- popup.html -->
    <div >
        <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>

CodePudding user response：

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);