Getting my last clicked buton to store in local storage

Question

I am creating an google chrome extension and I'm trying to create a start/ stop button. For some reason when I click the stop button, it will go to the start button while on the popup but when I exit off the popup, it resets back to the other button

Im trying to get my last clicked button to store in local storage so that when i click off the extension popup it will still show the button that was opposite of last clicked. For some reason when my stop button is clicked, it doesn't seem to store the variable lastclicked in local storage

Do anyone know what the issue may be or how to resolve this?

//Start and Stop buttons for logging
const btnStart = document.getElementById("click-start");
const btnStop = document.getElementById("click-stop");


//attempt to get start/stop logging buttons to work--underwork
function Logger(isLogging) {
  let logger =''
  if (isLogging){
    btnStart.style.display= "none";
    btnStop.style.display= "block";
    logger = 'logging' 
    addRow();
  } else {
    btnStart.style.display= "block";
    btnStop.style.display= "none";
    logger = 'not logging'
  }
    
  //using storage API to save data for last btn pressed--underwork
  chrome.storage.local.set({key: logger}, function() {
    console.log('value is set to  ' + logger);
  }); 
}         

var lastClicked = btnStart;

//button to start/stop logging
document.addEventListener("DOMContentLoaded", function () {
  
  //get lastClicked first to make decisons
  chrome.storage.local.get({'lastClicked': lastClicked}, function(result) {
    if (result = btnStart) {
        //works
        btnStart.style.display= "none";
        btnStop.style.display= "block";
        console.log("last clicked is start button");
        addRow();
    } else if (result = btnStop) {
        //not working
        btnStart.style.display= "block";
        btnStop.style.display= "none";   
        console.log("last clicked is stop button");
    } else {
        console.log("else statement");
    }
      
    //works   
    btnStart.addEventListener("click", function() {
      Logger(true);
      chrome.storage.local.set({'lastClicked': lastClicked}, function() {
      lastClicked = btnStart; //doesnt know if it saves
      console.log('logging started successful');
    }); 
  });

  //works
  btnStop.addEventListener("click", function() {
    Logger(false);
    chrome.storage.local.set({'lastClicked': lastClicked}, function() {
       lastClicked = btnStop; // doesnt know if it saves
      console.log('logging stopped successful');
    });
  });
});

chrome.storage.local.get(['key'], function(result) {
  console.log('value currently is ' + result.key);
});

Answer 1

First, try to fix if (result = btnStart), you assign btnStart to result and it's always true if btnStart exists.

Change with if (result === btnStart) or if (result == btnStart)

Same thing for (result = btnStop)

Edition

I've spent some time to understand what you try to achieve and by reading the storage doc for extensions.

I think this code is really more readable

document.addEventListener("DOMContentLoaded", function () {
    //Don't care about which button is used, keep the logica idea... is it started?
    let started = true;

    //Wait for content loaded before getting element is a better idea.
    const btnStart = document.getElementById("click-start");
    const btnStop = document.getElementById("click-stop");

    //Keep all the logic together
    const setStarted = s => {
        started = s;
        
        //This is a asynchronous call, I putted everything on the callback but as you want
        chrome.storage.local.set({started: started}, () => {
            console.debug("Storing `started` to storage with value:", isStarted);
            btnStart.style.display =  started? "none"  : "block";
            btnStop.style.display  = !started? "block" : "none";

            if ( started ) {
                //What's that?
                addRow();
            }
        }); 
    };

    //Get seems to by used with a string key, not an object
    chrome.storage.local.get(['started'], (result) => {
       console.debug("Reading `started` from storage gives", result.started);

       //Using setStarted avoid repeting always the same thing
       setStarted(result.started);
    });
     
    btnStart.addEventListener("click", () => setStarted(true) );
    btnStop.addEventListener("click", () => setStarted(false) );
});