+ 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>
9 Réponses
+ 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
+ 2
Josh Mizzi
Please reference links below.
https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
https://www.w3schools.com/html/html5_webstorage.asp
+ 1
Gavin no worries,
Are getting any error messages?
What device are you using to write this code?
+ 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.
+ 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!
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
0
ODLNT Thanks a ton!
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
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
Vous avez souvent des questions comme celle-ci ?
Apprenez de manière plus efficace, gratuitement :
