How can I get this javascript var to work across HTML pages?

Question

Page 1:

<html>
<head>
</head>
<body>
    <input type="checkbox" class="checkbox" name="item" value="X">Value X<br>
    <input type="checkbox" class="checkbox" name="item" value="Y">Value Y<br>
    <script type='text/javascript'>
        var score = 0;
        $('.checkbox').click (function(){
          var thisCheck = $(this);

          if ( thisCheck.is(':checked') ) {
            score = score + 1;
          }
        });
        sessionStorage.score = score;
    </script>
    <button type="button" onclick="window.location.href='page2.html'">Continue</button>
</body>
</html>

Page 2:

<html>
<head>
</head>
<body>
    <script type='text/javascript'>
    var score = sessionStorage.getItem('score');
    document.write(score);
    </script>
</body>
</html>

Page 2 always prints null. How can I fix this?
(If both checkboxes were selected, we need page 2 to print 2, for example)

Thanks!

N.B. I know that there is an easy solution to this by having a form action write to an asp file and then reading that, but I can't create new files on this system.

@RoryMcCrossan With HTML5 this is very possible. For example: `var score = 2; sessionStorage.score = score;` on one page and `var score = sessionStorage.getItem('score'); document.write(score);` on a second page works absolutely fine. — Tedfoo, Mar 29 '15 at 15:40

score 1 · Answer 1 · answered Mar 29 '15 at 15:50

1

First neither of your checkboxes actually have a class of 'checkbox' so that jquery event will never fire even if you check one of the checkboxes.

Also, you are declaring the variable as thisCheck but trying to access it using thischeck (notice the lower-case c). Javacript is case-sensitive so 'thischeck' is never being assigned a value.

answered Mar 29 '15 at 15:50

Joseph Moran III

26
3

Thanks. I have now update the question to be in this format, however it hasn't solved the problem. – Tedfoo Mar 29 '15 at 16:05
Do you have a script tag anywhere in your code actually referencing jquery? I don't see it in the code for your question. – Joseph Moran III Mar 29 '15 at 16:19
Yes, there is a reference. I just wanted to make the code for this question as easy to read as possible. – Tedfoo Mar 29 '15 at 16:28
Just out of curiousity, what browser are you using? The code is working fine for me in chrome but not internet explorer – Joseph Moran III Mar 29 '15 at 16:41
Chrome v40, OS X doesn't work (Safari doesn't either) – Tedfoo Mar 29 '15 at 16:50
Is your console showing any errors when you check a box? – Joseph Moran III Mar 29 '15 at 16:54

score 0 · Answer 2 · answered Mar 29 '15 at 15:49

0

You are not setting the session well, you need to do this you need to sessionStorage.setItem("score", score)

answered Mar 29 '15 at 15:49

Samuel Oloruntoba

35
5

Thanks for the tip! Unfortunately, this doesn't solve the problem. – Tedfoo Mar 29 '15 at 15:51

dfsq · Answer 3 · 2015-03-29T16:11:19.737

0

You need to set sessionStorage value on each click:

var score = 0;
$('.checkbox').click (function() {
  if (this.checked) {
      score = score + 1;
  }
  sessionStorage.score = score;
});
sessionStorage.score = score;

Note, that if probably want to deduct 1, if checkbox is unchecked, in this case try this code:

var score = 0;
sessionStorage.score = score;

$('.checkbox').click (function() {
    score = score + (this.checked ? 1 : -1);
    sessionStorage.score = score;
});

And btw, you need to add class="checkbox" to inputs.

edited Mar 29 '15 at 16:11

answered Mar 29 '15 at 16:05

dfsq

191,768
25
236
258

Does it print `null` or `0` on the page2? – dfsq Mar 29 '15 at 16:11

score 0 · Accepted Answer · answered Mar 29 '15 at 17:09

0

I found the solution. score was being parsed as something other than an Int for whatever reason.

Using score = parseInt(score) + 1; solved the problem.

Thanks to everyone who submitted answers! We got there in the end.

answered Mar 29 '15 at 17:09

Tedfoo

163
2
11

Out of curiosity, does it now work in Internet Explorer and Safari? – Benjamin Ray Mar 29 '15 at 19:03

How can I get this javascript var to work across HTML pages?

4 Answers4