+ 1

How to save a checked box with localStorage

I am trying to save if someone checked a box with javascripts localStorage but for some reason it wont work. Here's the code: <!DOCTYPE html> <html> <head> </head> <body> <input type="checkbox" id="Box" onclick="Box()"> <p id="Blank"></p> <script> localStorage.setItem('Box1', 0); var CheckBox = document.getElementById("Box"); if(localStorage.getItem('Box1') == 1) { document.getElementById("Blank").innerHTML = "Hello"; } function Box() { if(CheckBox.check) { localStorage.setItem('Box1', 1); } else { localStorage.setItem('Box1', 0); } } </script> </body> </html>

4th Jul 2018, 7:28 PM
Gavin
Gavin - avatar
9 odpowiedzi
+ 2
Gavin CheckBox.check should read CheckBox.checked. if(localStorage.getItem('Box1') == 1) is read once right after the initial setting of (Box1,0). If you want hello displayed everytime Box1 is checked then you must check localStorage every time the checkbox is clicked. https://code.sololearn.com/Wr1FUCsC2p1f/#html
4th Jul 2018, 10:15 PM
ODLNT
ODLNT - avatar
+ 1
Gavin no worries, Are getting any error messages? What device are you using to write this code?
5th Jul 2018, 1:20 AM
ODLNT
ODLNT - avatar
+ 1
Gavin I'm using Sololearn website on my windows os pc/ and nox android simulator(to write comments in Code Playgrounds comment section since you can't don't from the pc) When I ran your code I got this error message "Uncaught TypeError: Cannot read property 'checked' of null, Line: 16" 'null' is the key, in this case, the compiler is indicating that on line 16 (if(CheckBox.checked) it can't evaluate the checked property because there is no CheckBox aka <input type="checkbox" id="b1" onclick="Box()">. And there is no input because the script trying to access the DOM before the document is loaded. The easiest way to solve this is to move the script below the last element within the body tags. See link for alternative fixes. https://www.w3schools.com/jsref/event_onload.asp This should help, let me know either way.
5th Jul 2018, 8:45 PM
ODLNT
ODLNT - avatar
+ 1
ODLNT Awesome! I moved the script tag to the bottom and it didn't work but then i added the "onload" to my body tag and made it execute the "check()" function and it worked perfectly! Thanks so much for all the help man! If there was some sort of rating system on here i would rate you instantly hahahaha. It does save the checkboxes as well so thanks a ton!
5th Jul 2018, 9:36 PM
Gavin
Gavin - avatar
0
In order to save to local-storage you need to create a cookie or/and use the local storage object available in misy modern browsers. Also view ODLINT's post as they have added useful links. ODLNT
4th Jul 2018, 8:24 PM
josh mizzi
josh mizzi - avatar
0
ODLNT Thanks a ton!
5th Jul 2018, 12:01 AM
Gavin
Gavin - avatar
0
@ODLNT By no means do you have to, but I tried this in a different manner in my final project's test file and the point is to save if the box is checked. I copy/pasted your code (which worked) and made a slight few modifications but now it doesnt work. Again by no means do you have to look over it but honestly, im stumped. Thanks - Gavin. https://code.sololearn.com/WGPm3vZ0d3Oq/#html
5th Jul 2018, 1:05 AM
Gavin
Gavin - avatar
0
@ODLNT In sololearn i get a script error and i use a windows 10 machine with visual studio code. I use chrome to launch the file
5th Jul 2018, 2:47 AM
Gavin
Gavin - avatar