Returns [object CSSStyleDeclaration] instead of displaying CSS style

1

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.

2

Hi,
try to remove userVersion = editElement.style;
and then change <div id="saved-notes"></div>
to
<ul id="saved-notes"></ul>

in your css you refer to style the li element inside ul

3

Okay, I did that. While it partially solved my current problem, another one has emerged. Now, the content I created will be only text. But if I click the save button and refresh the page, it will add the styles that I want.

Basically, the problems have swapped and ideally, I wanted both of them to contain the style consistently.