Use onchange function elements declared in select tag in another function also?

I am trying to create a Button which when clicked will display all the colored notes. But the issue is color of the note is stored in local storage using an onchange function. This code shows how it is stored and how it is called

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

This is the code of onchange=changeColor function:

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

This is the code that I wrote for displaying all the colored notes. This is half written now but even in half-written it is not working: Here is the code:

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"
        }
    })
}

When I tried, console.log(color1) in the displayColorNote function the value is returned "null" and when I use Console.log(color1) in showNote2 function, it works great.I think the reason is set item is done in the change color function which is only triggered on Onchange and I need help with how to find a way to access color stored in local storage?

Use arrow function expressions

By using the arrow function syntax in your .addEventListener() you can be able to read datas from 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"
        }
    })
}