如何使用 JavaScript 让我的按钮正常工作？

Question

我正在创建一个 Google Chrome 扩展，并且试图让我的停止/停止日志记录按钮在我名为 Logger 的函数中工作。按下按钮时，它不会对我编写的函数做出反应，当前它显示停止按钮，但我希望它在单击时显示开始按钮。我希望我对此进行了一些解释，但有人可能知道为什么我的功能不起作用吗？

下面是我当前的 javascript 函数和 html ：

弹出窗口.js

//attempt to get start/stop logging buttons to work

function Logger(isLogging, notLogging) {

    if (isLogging = true, notLogging = false) {

        addRow();

        document.getElementById("click-start").style.display = "block";

        document.getElementById("click-stop").style.display = "none";    

    }

    if (isLogging = false, notLogging = true) {

        document.getElementById("click-start").style.display= "none";

        document.getElementById("click-stop").style.display= "block";

    }

}

//button to start logging

document.addEventListener('DOMContentLoaded', function() {

  document.getElementById("click-start").addEventListener("click", Logger(true, false));

});

//button to stop logging

document.addEventListener('DOMContentLoaded', function() {

  document.getElementById("click-stop").addEventListener("click", Logger(false, true));

});

弹出窗口.html

<!--Start button of logging-->

    <button class="button button1" id="click-start" >

    <u> Start Logging </u>

    </button>

    

    <!--Stop button of logging-->

    <button class="button button2" id="click-stop" >

    <u> Stop Logging </u>

    </button>

Answer 1

这可能有助于让核心功能正常工作，这个实现可以得到很大的改进const btnStart = document.getElementById("click-start");const btnStop = document.getElementById("click-stop");//attempt to get start/stop logging buttons to workfunction Logger(isLogging) {    console.log(isLogging)    if (isLogging) {        btnStart.style.display = "block";        btnStop.style.display = "none";    }else{        btnStart.style.display = "none";        btnStop.style.display = "block";    }}//button to start loggingdocument.addEventListener("DOMContentLoaded", function () {    btnStart.addEventListener("click", function() {Logger(false)});     btnStop.addEventListener("click", function() {Logger(true)});});您必须尽量将对 DOM 的查询保持在最低限度。看一下切换方法，它将有助于使您的代码更精简且更易于维护

Answer 2

我不确定如果您在 addEventListener 中像这样使用 Logger 函数是否会执行。也许你可以像这样尝试一下：document.addEventListener('DOMContentLoaded', function() {&nbsp; document.getElementById("click-start").addEventListener("click", function () {&nbsp; &nbsp; Logger(true, false))&nbsp; };});