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:
console.log("Change");
let note = localStorage.getItem("notes");
if(note != null ){
// let showNote3 = document.getElementById(`card4${index}`);
// console.log(showNote3);
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(index) {
let color1 = localStorage.getItem(`clr${index}`);
console.log(color1)
console.log("Display");
let displayBtn = document.getElementById("colored-btn")
.addEventListener("click",function (e){
console.log("Clicked",e);
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?
