Javascript 監聽器點擊誘餌

在測試檔案中編寫的程式碼運行得非常好，我必須將其合併到主程式碼中，但進展不太順利。

基本程式碼由一個簡單的 html 檔案和一個名為「記住這一點」的按鈕組成。

它有一個名為 showRememberMenu() 的函數的 onclick。該函數創建了一個顯示在按鈕下方的選單。

下拉式選單有幾個標籤可以添加到資料中，以提醒使用者為什麼要嘗試記住它。 （我老了，我需要所有我能得到的幫助來記住東西。）

點擊按鈕，查看下拉式選單，點擊您想要的標籤，您正在查看的資料將保存在帶有該標籤的陣列中。點擊選單後它就會消失。

然後我的任務是將其放入更大的腳本中並查看它是否同樣工作......哦，也許不是。點擊選單，使用標籤儲存數據，然後......什麼？為什麼菜單還在那裡？原版一點擊就被刪除了。為什麼它不消失？

如果我點擊「退出不儲存」標籤，它仍然顯示選單。

作為用戶，我正在查看一張包含資料庫資料的卡片。單擊此按鈕是保存該資料以供以後使用的一種方法。在這裡您可以看到帶有新按鈕的卡片。

點擊該按鈕查看下拉清單並選擇與記住此資料相關的標籤...

現在對其他卡片執行相同的操作，您就擁有了完成某些任務所需的所有數據，但為什麼「&%!!! 該選單永遠不會消失？

在我沒有想法後，我聯繫了我的同事人工智慧雙子座。它給了我第一個解決方案，這正是我已經擁有的程式碼。它建議了很多事情，但沒有一個起作用。

人們相信檢查節點和元素是否存在會讓一切都好起來，但事實並非如此。

我們花了大約一個小時的時間才被告知不起作用的事情，並被告知時間問題，可能需要延遲，這確實不相關，但作為一個團隊，我們慢慢地解決了這個問題。

如果你想嘗試解決這個問題，我敢打賭你可以在更短的時間內完成。

這是有效的原始草稿代碼...

  <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>

有一些CSS，但與問題無關

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

以上的作品，或多或少符合我的要求。

這是一個更大系統中的版本，我不會全部發布。

卡片是動態生成的，並添加了以下程式碼以產生與原始按鈕相同類型的按鈕

  <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>

其餘的 javascript 與原始程式碼幾乎相同

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

點擊之前的提醒

以及點擊後如何卡住

我不知道問題是什麼，Gemini 正在聽一場完全不相關的內容的講座，但艾和我終於縮小了範圍，現在看起來太簡單了。

那為什麼菜單會保留下來？