Danny_DD Danny_DD - 9 months ago 92
Javascript Question

How correctly compare two numbers with jQuery?

I want to compare two int numbers, but the functions says always that the numbers are different. I've already tried with different comparison symbols (both == and ===) without success.

What am I doing wrong?



$('.check').click(function() {
var number1 = parseInt($('.number1').text());
var number2 = parseInt($('.number2').text());
var testPassed = $('.test').css('background-color','green');
var testFailed = $('.test').css('background-color','red');
var resultG = $('.result').html('It is the same number!');
var resultNG = $('.result').html('The numbers are different!');

if(number1 === number2) {
testPassed;
resultG;
} else {
testFailed;
resultNG;
}
})

.test {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 50%;
margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="number1">10</p>
<p class="number2">10</p>
<button class="check">Check</button>
<div class="test"></div>
<p class="result"></p>





And what should I do to get a "true" result if I put -10 into
$('.number1')
?

Also if I use
Math.abs(number1)
to force it into a positive number nothing change and I get always a "false" result.

I'm pretty sure I'm doing something wrong with the comparison itself.

Answer Source
  var testPassed = $('.test').css('background-color','green');
  var testFailed = $('.test').css('background-color','red');
  var resultG = $('.result').html('It is the same number!');
  var resultNG = $('.result').html('The numbers are different!');

These are functions that you're calling and they are put in place immediately, the only thing being stored in the variable names are the return value. What this means is of course the background is red, it's the last thing you set it to. Of course the text is "the numbers are different!" it's the last thing you set it to.

The numbers are completely identical and if you compare them with either == or === they will return true.

Simply move your assignment code to the if statement itself.

    $('.check').click(function() {
  var number1 = parseInt($('.number1').text());
  var number2 = parseInt($('.number2').text());

    if(number1 === number2) {
    $('.test').css('background-color','green');
    $('.result').html('It is the same number!');
  } else {
    $('.test').css('background-color','red');
    $('.result').html('The numbers are different!');
  }
})

$('.check').click(function() {
  var number1 = parseInt($('.number1').text());
  var number2 = parseInt($('.number2').text());

	if(number1 === number2) {
  	$('.test').css('background-color','green');
    $('.result').html('It is the same number!');
  } else {
  	$('.test').css('background-color','red');
    $('.result').html('The numbers are different!');
  }
})
.test {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 50%;
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="number1">10</p>
<p class="number2">10</p>
<button class="check">Check</button>
<div class="test"></div>
<p class="result"></p>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download