Can somebody help me understand why this JavaScript code won't work, and how I can fix it?
Question
I'm trying make a global points bank for a project, and I've been trying to get a basic prototype of what I need made.
I've asked a question on how I can save a variable, and I got one answer that was OK, however, it didn't seem to work, and it would probably be better if I was to just ask a new question instead of spending a bunch of time talking in the comments with one person.
My problem is that when I press the button, it doesn't update.
The code:
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript variable testing</title>
</head>
<body>
<script type="tex/javascript">
var clicks = 500000;
function onClick() {
clicks += 1;
localStorage.setItem('clicks', clicks); // update the value
document.getElementById("clicks").innerHTML = clicks;
localStorage.setItem('clicks', clicks); // set the value to localStorage
};
window.onload = function() {
clicks = localStorage.getItem('clicks'); // get the value from localStorage
};
</script>
<button type="button" onclick="onClick()">Click this bit</button>
<p>Clicks: <a id="clicks">500000</a>
</p>
</body>
</html>
Also, if anybody could make their code so the variable stays the same, even for people who are using a different computer, it would be very much appreciated.
5 answers
solution1
2 2016-06-13 20:48:35
Replace yoiur script tag by this
<script type="text/javascript"> // Small misspelled
var clicks = 500000;
function onClick() {
clicks += 1;
localStorage.setItem('clicks', clicks); // update the value
document.getElementById("clicks").innerHTML = clicks;
localStorage.setItem('clicks', clicks); // set the value to localStorage
} // Removed semicolon you added by mistake
window.onload = function() {
clicks = localStorage.getItem('clicks'); // get the value from localStorage
};
</script>
solution2
1 2016-05-01 15:19:07
You misspelled in script type. Correct it to: <script type="text/javascript">
Reffering to your comment, I would do it in this way:
<script type="text/javascript">
var clicks; // variable initialization
function onClick() {
clicks = +clicks + 1; // + operator casts value to number
document.getElementById("clicks").innerHTML = clicks;
localStorage.setItem('clicks', clicks); // set the value to localStorage
};
window.onload = function() {
clicks = localStorage.getItem('clicks') || 500000; // get the value from localStorage, otherwise (if is null) set 500000 clicks
document.getElementById("clicks").innerHTML = clicks;
};
</script>
solution3
0 2016-05-01 15:24:31
You forgot at,
<script type="text/javascript">
Seems to be working after that.
solution4
0 2016-05-01 15:25:25
- Change
tex/javascripttotext/javascript. - You have to
parseInt()the value from localstorage (else it's a string).
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript variable testing</title>
<script type="text/javascript">
var clicks;
function onClick() {
clicks += 1;
localStorage.setItem('clicks', clicks); // update the value
document.getElementById('clicks').innerHTML = clicks;
}
window.onload = function() {
clicks = parseInt(localStorage.getItem('clicks')) || 500000; // get the value from localStorage and parse it to int
document.getElementById('clicks').innerHTML = clicks;
};
</script>
</head>
<body>
<button type="button" onclick="onClick()">Click this bit</button>
<p>Clicks: <a id="clicks">500000</a>
</p>
</body>
</html>
solution5
0 2016-05-01 15:32:49
Small Mistake In Code otherwise everything is fine
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript variable testing</title>
</head>
<body>
<script type="text/javascript"> // Small misspelled
var clicks = 500000;
function onClick() {
clicks += 1;
localStorage.setItem('clicks', clicks); // update the value
document.getElementById("clicks").innerHTML = clicks;
localStorage.setItem('clicks', clicks); // set the value to localStorage
} // Removed semicolon you added by mistake
window.onload = function() {
clicks = localStorage.getItem('clicks'); // get the value from localStorage
};
</script>
<button type="button" onclick="onClick()">Click this bit</button>
<p>Clicks: <a id="clicks">500000</a></p>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.