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

Question

我正在创建一个 Google Chrome 扩展，并且试图让我的停止/停止日志记录按钮在我名为 Logger 的函数中工作。按下按钮时，它不会对我编写的函数做出反应，当前它显示停止按钮，但我希望它在单击时显示开始按钮。我希望我对此进行了一些解释，但有人可能知道为什么我的功能不起作用吗？下面是我当前的 javascript 函数和 html ：弹出窗口.js//attempt to get start/stop logging buttons to workfunction 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 loggingdocument.addEventListener('DOMContentLoaded', function() {  document.getElementById("click-start").addEventListener("click", Logger(true, false));});//button to stop loggingdocument.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 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 的查询保持在最低限度。看一下切换方法，它将有助于使您的代码更精简且更易于维护

Answer 2

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

也许你可以像这样尝试一下：

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

  document.getElementById("click-start").addEventListener("click", function () {

    Logger(true, false))

  };

});