Javascript addEventListener is Not being Executed or is There an await Problem

Javascript addEventListener is Not being Executed or is There an await Problem

Problem Description:

I have a Chrome extension with the following js code in the initial HTML.

(async() => {
   console.log("Starting wrapper");
   await document.getElementById("start").addEventListener("click",sendStart);
   await document.getElementById("stop").addEventListener("click",sendStop);
   await document.getElementById("config").addEventListener("click",sendConfig);
   let {started} =await chrome.storage.session.get("started");
   if (started===undefined) {
       await chrome.storage.local.set({status:false});
       await chrome.storage.session.set({started:true});
   }
   let run=await chrome.storage.local.get("status");
   if (!run.status || Object.keys(run)==0) {
       document.getElementById("start").disabled=false;
       document.getElementById("stop").disable=true;
       document.getElementById("config").disabled=false;
   }
   else {
       document.getElementById("start").disabled=true;
       document.getElementById("stop").disabled=false;
       document.getElementById("config").disabled=true;
   }
   tmrs_obj= await chrome.storage.local.get("tmrs");
   document.getElementById("tmrs").innerHTML=tmrs_obj.tmrs;
   console.log("wrapper setup complete");
})();

The problem is when I click on the "start" button the listener does not seem to get triggered. In the console, all I see, when I click the "start" button is:

Starting wrapper
wrapper setup complete

In the listener I have a console.log statement that outputs that the listener was executed but that never shows up. The only thing I can think of is that when I click the "start" button the listener is not yet set up. However, even if I wait to click that button it still does not execute the listener. Oddly however, after trying 2 or 3 times (quitting each time) it finally works. Can someone help me debug this? TIA.

Solution – 1

I figured it out by accident. The problem was actually in the listener function itself. I had this code:

async function sendStart() {
   console.log("Sending start message");
   close.window();
   await chrome.storage.local.set({"status":true});
   document.getElementById("start").disabled=true;
   document.getElementById("stop").disabled=false;
   document.getElementById("config").disabled=true;
   await chrome.runtime.sendMessage({msg:"start"});
}

For whatever reason closing the window first was the problem. This is the code that works:

async function sendStart() {
   console.log("Sending start message");
   await chrome.storage.local.set({"status":true});
   document.getElementById("start").disabled=true;
   document.getElementById("stop").disabled=false;
   document.getElementById("config").disabled=true;
   await chrome.runtime.sendMessage({msg:"start"});
   window.close();
}