如何使用 javascript 让我的按钮工作？

Question

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

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

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


});

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

Image of current output--按钮目前没有反应

Answer 1

这可能有助于使核心功能正常工作，此实现可以得到很大改进

const btnStart = document.getElementById("click-start");
const btnStop = document.getElementById("click-stop");

//attempt to get start/stop logging buttons to work
function 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 logging
document.addEventListener("DOMContentLoaded", function () {
    btnStart.addEventListener("click", function() {Logger(false)}); 
    btnStop.addEventListener("click", function() {Logger(true)});
});

您必须尽量减少对 DOM 的查询。看看 toggle method 它将有助于使您的代码更精简和更易于维护

Answer 2

我不确定如果在 addEventListener 中这样使用 Logger 函数是否会被执行。

也许你可以这样试一试：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("click-start").addEventListener("click", function () {
    Logger(true, false))
  };
});

如何使用 javascript 让我的按钮工作？

How to get my button to work using javascript?

html

javascript

button

getelementbyid

google-chrome-extension