jQuery function with selectors as parameters

Question

I'm trying to create a function that add automatically value of the current element into another selector, something like this:

function calculate(current,selector) {
    var sum = $(selector).val();
        if (!isNaN($(current).value) && $(current).value.length != 0) {
            sum += parseFloat($(current).value);
        }
    $(selector).val(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="one" onkeyup="calculate(this,'#three')" >
<input type="text" id="two" onkeyup="calculate(this,'#five')" >
<input type="text" id="three">
<input type="text" id="five">

hsz · Accepted Answer · 2018-06-28 09:48:48Z

1

You're passing to onkeyup already executed function, so basically you're passing undefined as something that will be called. Try with:

<input type="text" id="two" onkeyup="() => calculate(this,'#five')" >

answered Jun 28, 2018 at 9:48

hsz

153k63 gold badges269 silver badges320 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ignacio Ramos · Accepted Answer · 2018-06-28 10:21:33Z

0

Change

$(current).value

to

$(current).val()

The code changed:

function calculate(current,selector) {
var sum = $(selector).val();
    if (!isNaN($(current).val()) && $(current).val().length != 0) {
        sum += parseFloat($(current).val());
    }
$(selector).val(parseFloat(sum).toFixed(3) );
}

answered Jun 28, 2018 at 10:21

Ignacio Ramos

616 bronze badges

Comments

Sylvain Attoumani · Accepted Answer · 2018-06-28 10:23:24Z

Something like that should work :

<!DOCTYPE html>
<html>
<body>

<input type="text" id="one" onkeyup="calculate(this,'#three')" >
<input type="text" id="two" onkeyup="calculate(this,'#five')" >
<input type="text" id="three">
<input type="text" id="five">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

    function calculate(current,selector) {
        var sum = parseFloat($(selector).val());
        var num = parseFloat($(current).val());
        if(!isNaN(num)){
            if(isNaN(sum)){
                $(selector).val(num)
            }
            else {
                $(selector).val(sum+num)
            }
        } 
    }
</script>
</html>
</body>

But I don't recommand you to do that. You see with the onkeyup you are gonna have some weird result with your sum if someone type something higher than 10

Takit Isy · Accepted Answer · 2018-06-28 11:05:41Z

Sometimes you were using .value, sometimes you used .val().

Changing all of them to .val() made it work for me.

Plus, I suggest you to use the unary operator + instead of parse…() methods. Just because it's cooler!

Here is the snippet I ended-up with:

function calculate(current, selector) {
  var sum = +$(selector).val();
  if (!isNaN($(current).val()) && $(current).val().length != 0) {
    sum += +$(current).val();
  }
  $(selector).val(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="one" onkeyup="calculate(this,'#three')">
<input type="text" id="two" onkeyup="calculate(this,'#five')">
<input type="text" id="three">
<input type="text" id="five">

Hope it helps.

Collectives™ on Stack Overflow

jQuery function with selectors as parameters

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related