Hi, guys! So I’m building a note-taking app and wanted the users’ saved notes to display on the screen. But there’s a weird problem. When I clicked a save button (for saving changed notes), it returns [object CSSStyleDeclaration] instead of showing an updated note. It will work if I removed userVersion = editElement.style;
but then, there will be no CSS style.
Here are my codes:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="checkEdits()">
<div id="myDiv" class="new-note">
<textarea id="myInput"></textarea><br>
<button onclick="newElement()" class="save-button">Create</button>
<button onclick="saveEdits()" class="edit-button">Save</button>
</div>
<div id="update"></div>
<div id="saved-notes"></div>
<ul id="myNotes">
</ul>
</body>
</html>
CSS
ul {
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
}
JavaScript
// Save a note when clicked the save button
function newElement() {
let li = document.createElement("li");
let inputvalue = document.querySelector("#myInput").value;
let savedNote = document.createTextNode(inputvalue);
li.appendChild(savedNote);
if (inputvalue === ''){
alert("Please write something")
} else {
document.querySelector("#myNotes").appendChild(li);
}
document.querySelector("#myInput").value = '';
}
// Open and edit the saved note when clicked the edit button
function saveEdits() {
// Get the editable element
let editElement = document.querySelector("#saved-notes");
editElement = document.querySelector("#myNotes");
// Get the edited element content
let userVersion = editElement.innerHTML;
userVersion = editElement.style;
// Save the content to local storage
localStorage.userEdits = userVersion;
// Write a confirmation to the user
document.querySelector("#update").innerHTML = "Edits saved";
}
// Check if user has previously saved edits
function checkEdits() {
if(localStorage.userEdits != null)
document.querySelector("#saved-notes").innerHTML = localStorage.userEdits;
document.querySelector("#myNotes").style = localStorage.userEdits;
}
I’d like to know why this happens and learn from it. Thanks in advance.