Javascript listeners click bait

Having written code in a test file that worked very nicely, I had to incorporate it into the main code & it didn't go so well.

The basic code consisted of a simple html file with a single button called "remember this."

That had an onclick to a function called showRememberMenu(). That function created a menu that was displayed under the button.

The dropdown menu had several tags to add to the data as a reminder of why the user was trying to remember it. (I'm old I need all the hlp I can get on remembering stuff.)

Click the button, see the dropdown menu, click the tag you want & the data you are looking at is saved in an array with that tag. Having clicked the menu it disappears.

My task was then to drop that into a larger script & see it work just the same... oh, maybe not. Click the menu, store the data with the tag and... what? why is the menu still there? It was deleted in the original as soon as it was clicked. Why is it not going away?

And if I click the tag that says 'Exit don't save' it is still displaying the menu.

As a user I was looking at a card that had data from the database. Clicking this button was a way to save that data for later use. Here you can see the card with its new button.

Click that button to see the drop down and select the tag that is relevant to remebering this data...

Now go do the same with other cards and you have all the data needed to complete some task, but why the "&%!!! is that menu never going away?

After I ran out of ideas I contacted my collegaue Gemini the AI. It gave me a first solution which was exactly the code that I already had. It suggested a lot of things, none of which worked.

It was confident that checking for the existence of the nodes & elements would make everything good, but it didn't.

It took about an hour of being told things that didn't work and being lectured on timing issues, possibly needing delays, which really weren't relevant, but slowly as a team we solved the problem.

If you want to try to solve this, I bet you can do it in less time.

Here's the original draft code that works...

  <meta charset="UTF-8">
  <title>Some Javascript</title>
  <link rel="stylesheet" href="./someJavascript.css">
  <link rel="icon" href="favicons/favicon.ico" type="image/icon type">


  <div>



<p>and the javascript<br>
</p>

<pre class="brush:php;toolbar:false">let logToConsole=true;
var rowData={THId:'2', TaskName:'To climb a tree', TaskDesc:'Try using hands & feet'};
var remember=[];

function rememberProcess(remember){
    if(logToConsole) console.log('RememberProcess()');
for(i=0;i<remember.length console.log of remember.length items as remember function putdataintoremember if remember.push deletemenu menulu.parentnode.removechild showremembermenu return already exists const remember_button="document.querySelector('#remember');" menuheaders="['EXIT" no save student manager author task note menulu="document.createElement('lu');" menulu.id="rememberMenu" for i="0;i<menuHeaders.length;i++){" li="document.createElement('li');" li.innertext="menuHeaders[i];" li.id="menuHeaders[i];" li.classlist.add li.addeventlistener> { //console.log('li button clicked', menuHeaders[i], rowData)
        if(menuHeaders[i]=='EXIT no save') {deleteMenu(menuLu);return};
    putDataIntoRemember(menuHeaders[i], rowData);//[header][rowData]       
    rememberProcess(remember);//do something with the stored data structure
    deleteMenu(menuLu);
      })

    menuLu.appendChild(li);
    }

remember_button.appendChild(menuLu);      
}
</remember.length>

There is some css, but it isn't relevant to the problem

.remember_button {

        background-color: #5A5050;
        border: 0;
        border-radius: 5px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: 12px;
        padding: 3px 4px;
        position: relative;        
        letter-spacing: 1px;
        width: 100px;

}

    /*Button goes white on hover*/
.remember_button:hover {
        background-color: #ffffff;
        color: #001F61;
        cursor:pointer;
    }    


.rememberLi{
    background-color: #aa9595;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 12px;
    padding: 3px 4px;
    position: relative;        
    letter-spacing: 1px;
    width: 100px;

}

.rememberLi:hover {
    background-color: #ffffff;
    color: #001F61;
    cursor:pointer;
}   

The above works, more or less as I wanted.

Here is the version inside a bigger system which I won't post all of.

A card is dynamically produced and has the following code added to produce the same kind of button as in the original

  <meta charset="UTF-8">
  <title>Some Javascript</title>
  <link rel="stylesheet" href="./someJavascript.css">
  <link rel="icon" href="favicons/favicon.ico" type="image/icon type">


  <div>



<p>and the javascript<br>
</p>

<pre class="brush:php;toolbar:false">let logToConsole=true;
var rowData={THId:'2', TaskName:'To climb a tree', TaskDesc:'Try using hands & feet'};
var remember=[];

function rememberProcess(remember){
    if(logToConsole) console.log('RememberProcess()');
for(i=0;i<remember.length console.log of remember.length items as remember function putdataintoremember if remember.push deletemenu menulu.parentnode.removechild showremembermenu return already exists const remember_button="document.querySelector('#remember');" menuheaders="['EXIT" no save student manager author task note menulu="document.createElement('lu');" menulu.id="rememberMenu" for i="0;i<menuHeaders.length;i++){" li="document.createElement('li');" li.innertext="menuHeaders[i];" li.id="menuHeaders[i];" li.classlist.add li.addeventlistener> { //console.log('li button clicked', menuHeaders[i], rowData)
        if(menuHeaders[i]=='EXIT no save') {deleteMenu(menuLu);return};
    putDataIntoRemember(menuHeaders[i], rowData);//[header][rowData]       
    rememberProcess(remember);//do something with the stored data structure
    deleteMenu(menuLu);
      })

    menuLu.appendChild(li);
    }

remember_button.appendChild(menuLu);      
}
</remember.length>

and the rest of the javascript is close to identical to the original

.remember_button {

        background-color: #5A5050;
        border: 0;
        border-radius: 5px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: 12px;
        padding: 3px 4px;
        position: relative;        
        letter-spacing: 1px;
        width: 100px;

}

    /*Button goes white on hover*/
.remember_button:hover {
        background-color: #ffffff;
        color: #001F61;
        cursor:pointer;
    }    


.rememberLi{
    background-color: #aa9595;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 12px;
    padding: 3px 4px;
    position: relative;        
    letter-spacing: 1px;
    width: 100px;

}

.rememberLi:hover {
    background-color: #ffffff;
    color: #001F61;
    cursor:pointer;
}   

A reminder of what it looks like before being clicked

and how it get stuck after being clicked

I had no idea what the problem was, and Gemini was off on one of its lectures over entirely irrelevant stuff but Ai & I finally narrowed things down and now it seems soo simple.

So why does the menu persist?