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

【问题标题】：Update DOM of popup.html after clicking button单击按钮后更新 popup.html 的 DOM
【发布时间】：2022-01-08 15:18:31
【问题描述】：

我正在制作一个 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);

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

【问题讨论】：

按钮正在提交表单，它会重新加载页面。
@Terry 谢谢！我在下面发布了相同的答案。

标签： javascript html google-chrome dom google-chrome-extension

【解决方案1】：

对我来说它工作正常。可以参考以下代码sn-p

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

【讨论】：

这是原生 JavaScript。 Chrome 扩展程序的功能略有不同，并且不允许出于安全目的使用某些标签属性。感谢您的帮助。

【解决方案2】：

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

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

【讨论】：