Take the 2-minute tour ×

I want to create a webpage where if Chelsea has a greater goal count than Arsenal, Chelsea's score increases by 1, and vice versa. It is not working and I am not sure why - then again I only started learning JS/JQ a couple of days ago.

What's wrong with the code? Also note, nothing is ever logged in the console. :(

$(document).ready(function() {
            var chelsea = parseInt($('#chelsea-goals').val());
            var arsenal = parseInt($('#arsenal-goals').val());
        if (chelsea > arsenal) {
            console.log('Chelsea > Arsenal');
        else if (arsenal > chelsea) {
            console.log('Arsenal > Chelsea');
        else {
            console.log('Scores were equal');

Also pardon the formatting - it is correct in my code - just doesn't look that nice on here.


<div class="scores" id="score-chelsea">0</div>
<div class="scores" id="score-arsenal">0</div>
<div class="goals" id="chelsea-goals">{{chelsea.goals}}</div>
<div class="goals" id="arsenal-goals">{{arsenal.goals}}</div>
<button id ="play"></button>
share|improve this question
It would be necessary to see the corresponding HTML to debug this. –  Oliver Moran Dec 30 '12 at 18:41
a JSFiddle example would be very helpful. –  Josep Dec 30 '12 at 18:41
Please post the HTML. Your JS is a little out of context. –  adamdunson Dec 30 '12 at 18:42
Ok posting it soon, let me just get it. –  JoseBazBaz Dec 30 '12 at 18:42
Are you sure nothing gets logged in the console? Not even error messages? –  Juhana Dec 30 '12 at 18:46

3 Answers 3

up vote 4 down vote accepted

You can't increment a parseInt() function. Change those lines to

$('#score-chelsea').val( parseInt( $('#score-chelsea').val() ) + 1 );

...and the same with #score-arsenal.

Demo: http://jsfiddle.net/2SVpE/

share|improve this answer
THanks, this looks good I will try and implement this into my code and will let you know if it works. –  JoseBazBaz Dec 30 '12 at 18:49
My webpage only says scores are equal - I suspect it's not grabbing the data correctly. –  JoseBazBaz Dec 30 '12 at 18:56
You can't use .val() to get text from inside divs. It's only for form fields. You need to use .text(). –  Juhana Dec 30 '12 at 18:59
Thanks that did the trick! That .val() was the problem - I will remember to use .text() next time. Thanks so much and have a happy new year! –  JoseBazBaz Dec 30 '12 at 19:01

1) The content of the div is not equivalent to a variable in javascript, so you can't get its content and call ++ on it like that. You must get the content (which will be gotten as a string) cast it to the number (the parseInt part), then do your math operation to it, then set the content of the div using the new value (which will automatically be cast back to a string, which is why you don't have to do that part).

2) Use .text() not .val(), .val() is for form field stuff, not for content of a div (.html() would also work, it gets the entire HTML contents, not just the text, in this case just the text IS the entire HTML contents...so they will act the same).

var ch_goals = parseInt($('#score-chelsea').text());

That outlines the process better, though there's shorter ways to write that, such as:

$('#score-chelsea').text( parseInt($('#score-chelsea').text())+1 );
share|improve this answer
I should also add that Lix's mention of storing the jQuery object in a variable is very correct. Things like calling $('#score-chelsea') that often is a lot of wasted processing. Best to go var chScore = $('#score-chelsea'); toward the beginning somewhere and then use chScore in place of repeatedly using $('#score-chelsea') –  Jimbo Jonny Dec 30 '12 at 19:12

The following line is what is causing problems -


You simply can't do it that way... The function parseInt returns the value. It doesn't contain a reference to the element that you extracted the value from. You'll need to put that value inside a variable first...

You'll want to do something like this

var increasedGoals = parseInt($('#score-chelsea').val());

The same goes for the other appearances of parseInt(...)++.

Another thing worth mentioning here is selector caching. You are using the selectors
$('#score-chelsea') and $('#score-arsenal') more than once, so why not have them cached!

  var chelsea = $('#chelsea-goals');
  var arsenal = $('#arsenal-goals');
  var chelseaGoals = chelseaElement.val();
share|improve this answer

Your Answer


