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() {
    let note = localStorage.getItem("notes");
    if(note == null){
        noteData = []
        // message.innerText = "Please Add a Note"
        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>
                <div class="card-body" id="card${index}" style="background-color:${color1}">
                  <h5 class="cardtitle">Note
                  ${index + 1}
                  <p class="card-text"> 
                  <button id="${index}" onclick="deleteNote(" class="btn btn-primary">Delete Note</a>
              </div>   `
              let showNote3 = document.getElementById("notes2");
              if(noteData.length != 0){
                  showNote3.innerHTML = showBox;
                  showNote3.innerHTML = "Please add a Note"

This is the code of onchange=changeColor function:

    let note = localStorage.getItem("notes");
    if(note != null ){
        // let showNote3 = document.getElementById(`card4${index}`);
        // console.log(showNote3);
        let colorApply = document.getElementById(`card${index}`);
        let elm1 = document.getElementById(`mySelect${index}`);
        let color = elm1.options[elm1.selectedIndex].value; = color;
        localStorage.setItem(`clr${index}`, color)
        `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(index) {
    let color1 = localStorage.getItem(`clr${index}`);
    let displayBtn = document.getElementById("colored-btn")
    .addEventListener("click",function (e){
        let clr1 = document.getElementById("clrR");
        let clr2 = document.getElementById("clrG");
        let clr3 = document.getElementById("clrB");
        if(color == clr1,clr2,clr3 ){
            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?

When calling displayClrNote, is the index value being sent correctly? I am trying to see if localStorage.getItem(clr${index}); is getting the intended argument.


Thanks for commenting
How can i check if the index is being sent correctly or not?

Add a console.log(index) at the top of your displayClrNote function.

It gives the error that index is not defined

That is a great indicator that something is off. The next step is to go backwards and see where the function is being called from and checking why the argument passed into it isn’t being defined.

It would help if we post a codepen link so we have a runnable code on the browser. I’m not sure if the forum has a codepen plugin though.

You can paste a codepen URL, and it will run inline with the post along with source code access :nerd_face: