Issue
So i have created a work day scheduler for a project im working on, iv managed to added the colour blocking for times of the day no problem, but im having real issues getting the local storage to work for the text input (eg: when i type a sentence into a time block i want it to save and then persist on reload of the page) Any help with what i have done wrong or any suggestions on how to make this work would be appreciated.
const clock = document.getElementById("clock");
setInterval(() => {
const now = moment();
const readable = now.format("dddd, MMMM Do YYYY, h:mm:ss a");
clock.textContent = readable;
}, 1000);
// $(document).ready(function () {
var saveBtn = document.querySelectorAll(".saveBtn");
saveBtn.forEach(function(node) {
node.addEventListener("click", function() {
var description = $(this).siblings(".description").val();
var time = $(this).parent().attr("id");
localStorage.setItem(time, description);
})
});
$("#hour1 .description").val(localStorage.getItem("hour1"));
$("#hour2 .description").val(localStorage.getItem("hour2"));
$("#hour3 .description").val(localStorage.getItem("hour3"));
$("#hour4 .description").val(localStorage.getItem("hour4"));
$("#hour5 .description").val(localStorage.getItem("hour5"));
$("#hour6 .description").val(localStorage.getItem("hour6"));
$("#hour7 .description").val(localStorage.getItem("hour7"));
$("#hour8 .description").val(localStorage.getItem("hour8"));
$("#hour9 .description").val(localStorage.getItem("hour9"));
$("#hour10 .description").val(localStorage.getItem("hour10"));
var elements = $(".time-block");
var d = new Date();
var h = d.getHours();
for (i = 0; i < elements.length; i++) {
var t = parseInt(elements[i].getAttribute("data-hour"));
if (h < t) {
elements[i].classList.add('future');
elements[i].classList.remove('past');
elements[i].classList.remove('present');
} else if (h > t) {
elements[i].classList.add('past');
elements[i].classList.remove('future');
elements[i].classList.remove('present');
} else if (h === t) {
elements[i].classList.add('present');
elements[i].classList.remove('future');
elements[i].classList.remove('past');
} else if (h > 16 && h < 9) {
elements[i].classList.add('future');
elements[i].classList.remove('past');
elements[i].classList.remove('present');
}
}body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1;
}
textarea {
background: transparent;
border: none;
resize: none;
color: #000000;
border-left: 1px solid black;
padding: 10px;
}
.jumbotron {
text-align: center;
background-color: transparent;
color: black;
border-radius: 0;
border-bottom: 10px solid black;
}
.description {
white-space: pre-wrap;
}
.time-block {
text-align: center;
border-radius: 15px;
}
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #000000;
}
.past {
background-color: #d3d3d3;
color: white;
}
.present {
background-color: #ff6961;
color: white;
}
.future {
background-color: #77dd77;
color: white;
}
.saveBtn {
border-left: 1px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #06aed5;
color: white;
}
.saveBtn i:hover {
font-size: 20px;
transition: all 0.3s ease-in-out;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./styles/style.css" />
<title>Work Day Scheduler</title>
<header class="jumbotron">
<h1 class="display-3">Work Day Scheduler</h1>
<p class="lead">A simple calendar app for scheduling your work day</p>
<p id="currentDay" class="lead"></p>
<div id="clock"></div>
</header>
</head>
<body>
<div class="container">
<!-- Timeblocks go here -->
<div id ="hour-1" data-hour="8" class = "row time-block">
<div class="col-1 hour">
8AM
</div>
<textarea id ="8AM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-2" data-hour="9" class = "row time-block">
<div class="col-md-1 hour">
9AM
</div>
<textarea id="9AM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-3" data-hour="10" class = "row time-block">
<div class="col-md-1 hour">
10AM
</div>
<textarea id="10AM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-4" data-hour="11" class = "row time-block">
<div class="col-md-1 hour">
11AM
</div>
<textarea id ="11AM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-5" data-hour="12" class = "row time-block">
<div class="col-md-1 hour">
12PM
</div>
<textarea id ="12PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-6" data-hour="13" class = "row time-block">
<div class="col-md-1 hour">
1PM
</div>
<textarea id="1PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-7" data-hour="14" class = "row time-block">
<div class="col-md-1 hour">
2PM
</div>
<textarea id="2PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-8" data-hour="15" class = "row time-block">
<div class="col-md-1 hour">
3PM
</div>
<textarea id="3PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-9" data-hour="16" class = "row time-block">
<div class="col-md-1 hour">
4PM
</div>
<textarea id="4PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<div id ="hour-10" data-hour="17" class = "row time-block">
<div class="col-md-1 hour">
5PM
</div>
<textarea id="5PM" class="col-md-10 description">
</textarea>
<button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="./script.js"></script>
</body>
</html>Solution
In this block :
var saveBtn = document.querySelectorAll(".saveBtn");
saveBtn.forEach(function(node) {
node.addEventListener("click", function() {
var description = $(this).siblings(".description").val();
var time = $(this).parent().attr("id");
localStorage.setItem(time, description);
})
});
you are storing in local storage with a key which is the id of the button's parent which is hour-1...hour-2.. etc
and then here :
$("#hour1 .description").val(localStorage.getItem("hour1"));
You are trying to set the value of the .description of #hour1 which does not exist from a local storage key which does not exist (hour1)
So in order to fix this you can just select the correct elements $("#hour-1 .description").val(localStorage.getItem("hour-1"));
Always do some debugging yourself before stepping and asking for help,for example if you'd just console.log(time, description) right after you set it to local storage it would give the cause of error right away
Answered By - Vaggelis
Answer Checked By - Clifford M. (JavaFixing Volunteer)
