javascript - 也可以在另一个函数中使用在 select 标记中声明的 onchange 函数元素吗？

Question

我正在尝试创建一个按钮，单击该按钮将显示所有彩色注释。但问题是音符的颜色是使用 onchange 函数存储在本地存储中的。这段代码展示了它的存储方式和调用方式

function showNote2() {
    console.log("Show");
    let note = localStorage.getItem("notes");
    if(note == null){
        noteData = []
        // message.innerText = "Please Add a Note"
    }
    else{
        noteData = JSON.parse(note);
    };
    let showBox = "";
    noteData.forEach(function show(element, index) {
        let color1 = localStorage.getItem(`clr${index}`);
        showBox += `<div class="noteCard my-2 mx-2 card" id="cardID" style="width: 18rem;">
        <select id="mySelect${index}" class="clr-btn" style="text-align:center" onchange="changeColor(${index})">
        <option id="bckgrnd-clr" value="white">Background Color</option>
        <option id="clrR" value="Red">Red</option>
        <option id="clrG" value="Green">Green</option>
        <option  id="clrB" value="Blue">Blue</option>
        </select>
                <div class="card-body" id="card${index}" style="background-color:${color1}">
                  <h5 class="cardtitle">Note
                  ${index + 1}
                  </h5>
                  <p class="card-text"> 
                  ${element}
                  </p>
                  <button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</a>
                </div>
              </div>   `
            });
              let showNote3 = document.getElementById("notes2");
              if(noteData.length != 0){
                  showNote3.innerHTML = showBox;
              }else{
                  showNote3.innerHTML = "Please add a Note"
              };  
        };

这是 onchange=changeColor 函数的代码:

function changeColor(index) {
    console.log("Change");
    let note = localStorage.getItem("notes");
    if(note != null ){
        let colorApply = document.getElementById(`card${index}`);
        console.log(colorApply);
        let elm1 = document.getElementById(`mySelect${index}`);
        console.log(elm1);
        let color = elm1.options[elm1.selectedIndex].value;
        colorApply.style.backgroundColor = color;
        localStorage.setItem(`clr${index}`, color)
    }
    else{
        `Note is Empty`;
    };
};

这是我为显示所有彩色笔记而编写的代码。现在写了一半，但即使写了一半也不起作用:这是代码:

function displayClrNote() {
    console.log("Display");
    let displayBtn = document.getElementById("colored-btn")
    .addEventListener("click",function (e){
        console.log("Clicked",e);
         let color1 = localStorage.getItem(`clr${index}`);
         console.log(color1)
        let clr1 = document.getElementById("clrR");
        console.log(clr1)
        let clr2 = document.getElementById("clrG");
        let clr3 = document.getElementById("clrB");
        if(color == clr1,clr2,clr3 ){
            console.log("Yes");
        }
        else{
            return "Not found"
        }
    })
}

当我尝试时，displayColorNote 函数中的 console.log(color1) 值返回“null”，当我使用 Console.log(color1 ) 在 showNote2 函数中，效果很好。我认为原因是 set item 是在仅在 Onchange 上触发的更改颜色函数中完成的 我需要帮助以找到一种方法来访问存储在 local storage?

中的颜色

Answer 1

使用arrow function expressions

通过在 .addEventListener() 中使用箭头函数语法，您可以从 localStorage 中读取数据

function displayClrNote() {
    console.log("Display");
    let displayBtn = document.getElementById("colored-btn").addEventListener("click",evt=>{
        console.log("Clicked",evt);
        let color1 = localStorage.getItem(`clr${index}`);
        console.log(color1)
        let clr1 = document.getElementById("clrR");
        console.log(clr1)
        let clr2 = document.getElementById("clrG");
        let clr3 = document.getElementById("clrB");
        if(color == clr1,clr2,clr3 ){
            console.log("Yes");
        }
        else{
            return "Not found"
        }
    })
}