so we have this assignment (no submit form involved, only clicks) that once you save data and store it inside of localStorage and then after refreshing the page, the text inside the textarea placeholder should still be present within the browser window.
My issue is that after refreshing the page, the text disappears from the placeholder. Any ideas on why that is?
note: my localStorage key and value stay as I wanted.
the highlighted text area place holder box should still say Zebra after click
I don’t see a placeholder attribute on the textarea. Do you mean the text that the user entered into the textarea that you saved to local storage?
If so, I don’t see any code that gets the saved text out of local storage and puts it in the textarea when the page loads. Are you showing us all of your code?
Also, it is always better to either paste your actual code in here, or better yet, give us a link to your code/project so we can test it ourselves. Reading pics of code is not the easiest and we have no way to play around with it.
sorry, not place holder. Yes, just the text inside after a user inputs text.
line 37 was my attempt to get the value that got stored in localStorage and then turn it into text inside the textarea element using .textContent
JAVASCRIPT
// HOUR DIVS
var hour9El = document.querySelector('#hour-9')
// var hour10El = document.querySelector('#hour-10')
// var hour11El = document.querySelector('#hour-11')
// var hour12El = document.querySelector('#hour-12')
// var hour1El = document.querySelector('#hour-1')
// var hour2El = document.querySelector('#hour-2')
// var hour3El = document.querySelector('#hour-3')
// var hour4El = document.querySelector('#hour-4')
// var hour5El = document.querySelector('#hour-5')
// HOUR BUTTONS
var saveBtn9amEl = document.querySelector('#save-btn-9am')
// var saveBtn10amEl = document.querySelector('#save-btn-10am')
// var saveBtn11amEl = document.querySelector('#save-btn-11am')
// var saveBtn12amEl = document.querySelector('#save-btn-12pm')
// var saveBtn1pmEl = document.querySelector('#save-btn-1pm')
// var saveBtn2pmEl = document.querySelector('#save-btn-2pm')
// var saveBtn3pmEl = document.querySelector('#save-btn-3pm')
// var saveBtn4pmEl = document.querySelector('#save-btn-4pm')
// var saveBtn5pmEl = document.querySelector('#save-btn-5pm')
// 9AM CLICK
saveBtn9amEl.addEventListener('click', (event) => {
// prevent refresh
event.preventDefault()
// reassign hour9El to child element of textarea
hour9El = document.querySelector('#hour-9 > textarea')
// save value inside of localStorage from reassigned element
localStorage.setItem('hour9am', hour9El.value)
// then set the textContent to the value so it stays after refresh
hour9El.textContent = localStorage.getItem('hour9am');
})
HTML
<!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://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/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="style.css" />
<title>Work Day Scheduler</title>
</head>
<body>
<header class="p-5 mb-4 border-5 border-bottom border-dark text-center">
<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>
</header>
<div id="test" class="container-lg px-5">
<!-- Use class for "past", "present", and "future" to apply styles to the
time-block divs accordingly. The javascript will need to do this by
adding/removing these classes on each div by comparing the hour in the
id to the current hour. The html provided below is meant to be an example
demonstrating how the css provided can be leveraged to create the
desired layout and colors. The html below should be removed or updated
in the finished product. Remember to delete this comment once the
code is implemented.
-->
<!-- Example of a past time block. The "past" class adds a gray background color. -->
<div id="hour-9" class="row time-block past">
<div class="col-2 col-md-1 hour text-center py-3">9AM</div>
<textare value="" class="col-8 col-md-10 description" rows="3"> </textare>
<button id="save-btn-9am" class="btn saveBtn col-2 col-md-1" aria-label="save">
<i class="fas fa-save" aria-hidden="true"></i>
</button>
</div>
<!-- Example of a a present time block. The "present" class adds a red background color. -->
<div id="hour-10" class="row time-block present">
<div class="col-2 col-md-1 hour text-center py-3">10AM</div>
<textarea class="col-8 col-md-10 description" rows="3"> </textarea>
<button id="save-btn-10am" class="btn saveBtn col-2 col-md-1" aria-label="save">
<i class="fas fa-save" aria-hidden="true"></i>
</button>
</div>
<!-- Example of a future time block. The "future" class adds a green background color. -->
<div id="hour-11" class="row time-block future">
<div class="col-2 col-md-1 hour text-center py-3">11AM</div>
<textarea class="col-8 col-md-10 description" rows="3"> </textarea>
<button id="save-btn-11am" class="btn saveBtn col-2 col-md-1" aria-label="save">
<i class="fas fa-save" aria-hidden="true"></i>
</button>
</div>
<div id="hour-12" class="row time-block future">
<div class="col-2 col-md-1 hour text-center py-3">12PM</div>
<textarea class="col-8 col-md-10 description" rows="3"> </textarea>
<button id="save-btn-12pm" class="btn saveBtn col-2 col-md-1" aria-label="save">
<i class="fas fa-save" aria-hidden="true"></i>
</button>
</div>
<div id="hour-1" class="row time-block future">
<div class="col-2 col-md-1 hour text-center py-3">1PM</div>
<textarea class="col-8 col-md-10 description" rows="3"> </textarea>
<button id="save-btn-1pm" class="btn saveBtn col-2 col-md-1" aria-label="save">
<i class="fas fa-save" aria-hidden="true"></i>
</button>
</div>
<div id="hour-2" class="row time-block future">
<div class="col-2 col-md-1 hour text-center py-3">2PM</div>
<textarea class="col-8 col-md-10 description" rows="3"> </textarea>
<button id="save-btn-2pm" class="btn saveBtn col-2 col-md-1" aria-label="save">
<i class="fas fa-save" aria-hidden="true"></i>
</button>
</div>
<div id="hour-3" class="row time-block future">
<div class="col-2 col-md-1 hour text-center py-3">3PM</div>
<textarea class="col-8 col-md-10 description" rows="3"> </textarea>
<button id="save-btn-3pm" class="btn saveBtn col-2 col-md-1" aria-label="save">
<i class="fas fa-save" aria-hidden="true"></i>
</button>
</div>
<div id="hour-4" class="row time-block future">
<div class="col-2 col-md-1 hour text-center py-3">4PM</div>
<textarea class="col-8 col-md-10 description" rows="3"> </textarea>
<button id="save-btn-4pm" class="btn saveBtn col-2 col-md-1" aria-label="save">
<i class="fas fa-save" aria-hidden="true"></i>
</button>
</div>
<div id="hour-5" class="row time-block future">
<div class="col-2 col-md-1 hour text-center py-3">5PM</div>
<textarea class="col-8 col-md-10 description" rows="3"> </textarea>
<button id="save-btn-5pm" class="btn saveBtn col-2 col-md-1" aria-label="save">
<i class="fas fa-save" aria-hidden="true"></i>
</button>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/dayjs@1.11.3/dayjs.min.js"
integrity="sha256-iu/zLUB+QgISXBLCW/mcDi/rnf4m4uEDO0wauy76x7U="
crossorigin="anonymous"
></script>
<script src="script.js"></script>
</body>
</html>
CSS (may not be needed)
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
textarea {
background: transparent;
border: none;
resize: none;
color: #000000;
border-left: 1px solid black;
padding: 10px;
}
.description {
white-space: pre-wrap;
}
.time-block {
border-radius: 15px;
}
.row {
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;
}
Ahh, I see, that line was commented out in your pic so I had ignored it.
So when is line 37 executed? Will it be executed when the page loads? Or only when the click handler for the button is activated?
when the click handler gets activated.
Right, so what that does tell you?
that its going back to an empty string?
Yes, but you already knew that. What do you need to do so that you get that text from local storage and put it in the textarea on page load?
assign the value from local storage using getItem to a variable with textContent attached to the element of textarea
I feel like we are going around in circles here 
I think you understand that you need to retrieve the text from local storage and put it in the textarea. I’m trying to get you to realize that you need to do that in another place. Try googling the following:
execute JS on page load
I am still not sure, im sorry.
So I just now reassigned my hour9El at the top outside of the listener to the same ID but I moved the ID in my html to the text area instead of having it connected to the div element which was the parent of the text area. it works now, but I was still hoping to go the other route though.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.