CODEWITHSUNDEEP
javascriptvariables
user1967599
user1967599

Reputation:

Javascript: Why is a number treated as a string?

I am trying to figure out why is the number from an input textbox treated as a string. The short script here works up to the point where I am entering a number into the second textbox. The vallue from the second textbox is attached to the final value as a string and not added as a number. I tried using parseInt() but in that case my result is NaN. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

var extras_fee = 0;

function validate_extra1(){
   var extra1_value = document.getElementById('extra1').value;
   var extra2_value = document.getElementById('extra2').value;
   var extra1_radiovalue = $('input[name=radio_extra1]:checked').val();
   if (extra1_value.length > 0 && extra1_radiovalue == 2000)
       {extras_fee = 2000;}
   if (extra1_value.length > 0 && extra1_radiovalue == 4000)
       {extras_fee = 4000;}
   if (extra1_value.length == 0)
       {extras_fee = 0;}
  extras_fee = extras_fee + extra2_value;
  document.getElementById('fee_container').innerHTML = extras_fee;
  }
$(function(){
  $(document).on('click', '#continue_extras', function(){
    $("<div class='st'><b>Some title.</b></div>"  +
      "<div class='infwin'>Some text </div> " +
      "<div>input some text here <input type='text' name='fname' id='extra1' onkeyup='validate_extra1()'>" + 
      "<input type='radio' name='radio_extra1' value='2000' onclick='validate_extra1()'>2000" +
      "<input type='radio' name='radio_extra1' value='4000' onclick='validate_extra1()'>4000</div>" +
      "<div class='infwin'>more text here</div> " +
      "<div>input some numerical values here <input type='text' name='fname' id='extra2' placeholder='minimum 1000'  onkeyup='validate_extra1()'> text</div>" +
      "<div id='fee_container'></div>" +
      "<div class='button' id='continue_post'>Submit >>></div> " +
      "<div class='miclear'></div><br />").appendTo('#extras_container');
    $('#continue_extras').hide();
  });
});  

</script>
</head>
<body>
<div id='continue_extras'>click</div>
<div id='extras_container'></div>
</body>
</html>​

Upvotes: 1

Views: 3814

Answers (3)

Gilsha
Gilsha

Reputation: 14591

You will have to validate extra2_value before adding.

 var extra2_value = parseInt(document.getElementById('extra2').value);
 extra2_value = extra2_value?extra2_value:0;

JsFiddle

Upvotes: 2

Jay
Jay

Reputation: 1033

Values come back as a string, you have to parse them: http://jsbin.com/quhoxivere/10/edit

in the example link i get the value first:

var value = document.getElementById('test').value;

console.log('value is', value);

Then I parse it

  var intValue = parseInt(value);

console.log('value is now ', (typeof intValue));

In the console log you can see that the type of invalue is "number" (integer).

Hope this helps

Upvotes: 0

Callum Linington
Callum Linington

Reputation: 14417

var extra1_value = document.getElementById('extra1').value; // this is a string
var extra2_value = document.getElementById('extra2').value; // this is a string
var extra1_radiovalue = $('input[name=radio_extra1]:checked').val(); // this is a string

if (extra1_value.length > 0 && extra1_radiovalue == 2000) // this works because "2000" == 2000, if you use === then it would fail
    {extras_fee = 2000;} // this is a number
if (extra1_value.length > 0 && extra1_radiovalue == 4000)
    {extras_fee = 4000;} // this is a number
if (extra1_value.length == 0)
    {extras_fee = 0;} // this is a number

extras_fee = extras_fee + extra2_value; // because extra2_value is a string, it will automatically cast to a string
// thus concatenating them as a string, not doing a numeric addition

What you need to do is convert extra2_value to an integer.

parseInt(extra2_value, 10) // do not forget to use that 10 to tell it what base to use

Problem solved?

Upvotes: 0

Related Questions