CODEWITHSUNDEEP
javascriptjquery
JoseBazBaz
JoseBazBaz

Reputation: 1445

Compare Div Values

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() {
    $("#play").click(function(){
            var chelsea = parseInt($('#chelsea-goals').val());
            var arsenal = parseInt($('#arsenal-goals').val());
        if (chelsea > arsenal) {
            parseInt($('#score-chelsea').val())++;
            console.log('Chelsea > Arsenal');
        }
        else if (arsenal > chelsea) {
            parseInt($('#score-arsenal').val())++;
            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.

UPDATE

<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>

Upvotes: 1

Views: 885

Answers (3)

Jimbo Jonny
Jimbo Jonny

Reputation: 3579

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());
ch_goals++;
$('#score-chelsea').text(ch_goals);

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

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

Upvotes: 0

Lix
Lix

Reputation: 47956

The following line is what is causing problems - 

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

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());
increasesGoals++;

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!

$("#play").on('click',function(){
  var chelsea = $('#chelsea-goals');
  var arsenal = $('#arsenal-goals');
  ...
  var chelseaGoals = chelseaElement.val();
  chelseaGoals++;
  chelsea.val(chelseaGoals);
  ...
});

Upvotes: 3

JJJ
JJJ

Reputation: 33163

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/

Upvotes: 4

Related Questions