How to get my button to work using javascript?

Question

I am creating an Google chrome extension and I am trying to get my stop/stop logging button to work within my function named Logger. When the button is pressed it doesn't react to the function I wrote, Currently it is displaying the stop-button but I want it to display the start-button when clicked. I hope I explained that to some understanding but do anyone possibly know why my function is not working?

Below is my current javascript function and 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--button currently doesnt react

Beside your actualy problem, use only one parameter in the Logging() function and do one if check. if (isLogging) { ... } else { ... } — Jule Wolf
– Jule Wolf, Commented Nov 13, 2020 at 7:24

Ricardo Sanchez · Accepted Answer · 2020-11-13 07:31:14Z

2

This may help to get the core functionality working, this implementation can be much improved

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)});
});

You have to try to keep the queries to the DOM to a minimum. Have a look at the toggle method it will help to make your code a bit leaner and easier to maintain

answered Nov 13, 2020 at 7:31

Ricardo Sanchez

5,21213 gold badges62 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ricardo Sanchez Over a year ago

Glad it helped, I forgot to mention that since you are using the 'DOMContentLoaded' you may want to wrap all the code in there, or create and initialisation method that, creates and calls the methods

Jule Wolf · Accepted Answer · 2020-11-13 07:31:19Z

2

I'm not sure if the Logger function gets executed if you use it like this in the addEventListener.

Maybe you can give it a try like this:

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

answered Nov 13, 2020 at 7:31

Jule Wolf

2211 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to get my button to work using javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related