Issue
In the script below, I want to be able to display on the main html page lists of paragraphs saved in the localstorage, add, remove or delete them all.
In the script below the function "displaylocalstorage" does not allow me to display the values that have been saved in the localstorage with the function "storedparagraphs". Can you please give me some guidelines to correct the "displaylocalstorage" function? Can you also give me guidelines to correct the "removedlastparastored" function?
Here is the html and js script below:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<div>
<h1 id ="title">Items List</h1>
<br>
<br>
<div id ="content" class="content">
</div>
<br>
<br>
<input type="text" value = "Enter an Item" onfocus = 'this.value =""' id="mytext">
<br>
<br>
<input type="button" value="Add item" id="addbutton" class="addbutton">
<br>
<br>
<input type="button" value="Remove Last Item" id="buttonremove" class="buttonremove">
<br>
<br>
<input type="button" value="Clear All" id="buttonclearall" class="buttonclearall">
</div>
<script src="static/script.js"></script>
Javascript:
const mybutton = document.getElementById ("addbutton");
const mytext = document.getElementById("mytext");
const content = document.getElementById("content");
const buttonremove = document.getElementById("buttonremove");
const buttonclearall = document.getElementById("buttonclearall");
function storedparagraphs() {
let n = 0;
while (localStorage.getItem("content" + n)) {
n++;
}
localStorage.setItem("content" + n, mytext.value);
}
function displaylocalstorage() {
const n = 0;
const items = [];
while (localStorage.getItem("content" + n)) {
items.push(localStorage.getItem("content" + n++));
}
return items;
}
function addparagraphs () {
const newparagraph = document.createElement("p");
newparagraph.innerText = mytext.value;
content.appendChild(newparagraph);
}
function removedlastpara(){
const paragraphs = document.getElementsByClassName("beautiful");
if(paragraphs.length > 0){
const lastposition = paragraphs.length -1;
content.removeChild(paragraphs[lastposition]);
}
}
function removedlastparastored(){
const n = 0;
while (localStorage.getItem("content" + n)) {
n++;
}
localStorage.setItem("content" + n, mytext.value);
if(n.length >0){
let lastposition = n.length -1;
localStorage.removeItem("content", lastposition)
}
}
function clearall(){
const paragraphs = document.getElementsByClassName("beautiful");
while(paragraphs.length > 0){
paragraphs[0].parentNode.removeChild(paragraphs[0]);
}
}
function clearallstored(){
localStorage.clear();
return false;
}
mybutton.addEventListener("click",addparagraphs);
mybutton.addEventListener("click",storedparagraphs);
buttonremove.addEventListener("click", removedlastpara);
buttonremove.addEventListener("click", removedlastparastored);
buttonclearall.addEventListener("click", clearall);
buttonclearall.addEventListener("click", clearallstored);
Solution
displaylocalstorage is not being called.
add this to your js
const buttonshow = document.getElementById("buttonshow");
buttonshow.addEventListener("click", displaylocalstorage);
and to your html:
<input
type="button"
value="show"
id="buttonshow"
class="buttonshowall"
/>
and console log items in the displaylocalstorage
Thank would be a good start. Other than this in that paragraph remove length from n as n is a number. If you keep it as length it will error.
if(n>0){
let lastposition = n -1;
localStorage.removeItem("content", lastposition)
}
Another big one is change const n to let as you try to update n and const won't allow you to do that.
Answered By - pau
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.