CODEWITHSUNDEEP
javascriptjquery
Peter
Peter

Reputation: 330

Comparing two input fields - What am I doing wrong?

Forgive me but I'm just starting to learn Javascript. I'm trying to get the sum of two input fields, and I'd like to update the result "live" so to speak, on every keyup event.

At the moment the result field just disappears when values are entered into the input fields.

What am I doing wrong?

Thank you so much,

Peter

edit: how stupid of me, I forgot to post the code

http://jsfiddle.net/u7VwP/

var inputFirst = $('#first'),
    inputSecond = $('#second'),
    inputFirstVal = inputFirst.val(),
    inputSecondVal = inputSecond.val();

function getResult(first, second) {
 var result = first + second;
 $('p#result').text(result);
};


inputFirst.on('keyup', function() {
 getResult(inputFirstVal, inputSecondVal);
});
inputSecond.on('keyup', function() {
 getResult(inputFirstVal, inputSecondVal);
});​

Upvotes: 0

Views: 136

Answers (5)

CYB
CYB

Reputation: 421

You've to read & think about the runtime of Javascript code. In your example, the variables get read out when the input fields are empty. So for that, they'll always be empty. You've to read them out in the function where you add them together.

Additionally I'd recommend to have a look at the jQuery selectors. In the following code, a bind is made for two objects.

$(document).ready(function() {
    $('#first, #second').bind('keyup', function() {
        $('#result').val($('#first').val() + $('#second').val());
    });
});

Upvotes: 0

Varun Achar
Varun Achar

Reputation: 15109

var inputFirst = $('#first'),
    inputSecond = $('#second'),
    inputFirstVal = inputFirst.val(),
    inputSecondVal = inputSecond.val();

function getResult(first, second) {
    var result = (parseInt(first) || 0) + (parseInt(second) || 0);
    //field.val() returns strings not numbers so parsing to ints. If letter is passed, consider it as 0
    $('p#result').text(result);
};

function handler()
{
  getResult(inputFirst.val() || 0, inputSecond.val() || 0); 
  // if value is null or undefined pass 0 to the function
}

inputFirst.on('keyup', handler);
inputSecond.on('keyup', handler);​

Upvotes: 0

Peter Holmberg
Peter Holmberg

Reputation: 13

var inputFirst = $('#first'),
    inputSecond = $('#second');

function getResult() {
    var result = (parseInt(inputFirst.val()) || 0) + (parseInt(inputSecond.val()) || 0);
    $('#result').text(result);
};

inputFirst.on('keyup', function() {
    getResult();
});
inputSecond.on('keyup', function() {
    getResult();
});​

Upvotes: 0

Kos
Kos

Reputation: 72261

inputFirstVal = inputFirst.val(),
inputSecondVal = inputSecond.val();

These variables are only initialized once. You need to call val() at the exact moment when you want to read the current value.

See http://jsfiddle.net/u7VwP/7/

Updated: Added parseInt so you'd be adding numbers not strings.

Note this syntax:

first = parseInt(first) || 0;

If the result of parseInt is falsy (like NaN "not a number" when we cannot parse the number, or a literal 0), the value is defaulted to the right hand-side of || operator, 0.

Upvotes: 1

dan richardson
dan richardson

Reputation: 3939

As from my comment, the getResult function would end as:

function getResult() {
 inputFirstVal = inputFirst.val(),
 inputSecondVal = inputSecond.val();
 var result = inputFirstVal  + inputSecondVal ;
 $('p#result').text(result);
};

as on change you would just call the function: 

inputFirst.on('keyup', getResult);
inputSecond.on('keyup', getResult);

Upvotes: 0

Related Questions