单击按钮后更新 popup.html 的 DOM

Question

我正在制作 chrome 延期。单击 ID 为 submit 的提交按钮后，我想用一些文本更新 popup.html 中的 h3 元素。

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

该函数用文本填充元素，我看到了文本，但它在几微秒内立即消失了。我哪里错了？

Answer 1

对我来说它工作正常。您可以参考以下代码片段

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

Answer 2

表单在提交时默认刷新页面，因此填充的文本消失。只需添加一个事件侦听器即可禁用它，从而使 DOM 保持不变。

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

单击按钮后更新 popup.html 的 DOM

Update DOM of popup.html after clicking button

html

javascript

dom

google-chrome

google-chrome-extension