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

【问题标题】：How to get my button to work using javascript?如何让我的按钮使用 javascript 工作？
【发布时间】：2021-02-25 05:21:21
【问题描述】：

我正在创建一个 Google chrome 扩展程序，并试图让我的停止/停止日志记录按钮在我的名为 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--按钮目前没有反应

【问题讨论】：

除了你的实际问题，在 Logging() 函数中只使用一个参数，如果检查则做一个。 if (isLogging) { ... } else { ... }

标签： javascript html button google-chrome-extension getelementbyid

【解决方案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 它将有助于使您的代码更精简和更易于维护

【讨论】：

很高兴它有帮助，我忘了提及，由于您使用的是“DOMContentLoaded”，您可能希望将所有代码包装在其中，或者创建和初始化方法，创建和调用方法跨度>

【解决方案2】：

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

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

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

【讨论】：