Jquery using function to return a value

Question

Created a JS function to add two numbers in index.js

function add(number1, number2) {
var num1 = parseInt(number1);
var num2 = parstInt(number2);
var num3 = num1.num2;
return num3;
}

Created a html page in Visual Studio

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js">     
</script>
<script src="index.js"> </script>
</head>
<body>
<h1> Adding two numbers </h1>
<input id="num1" placeholder="0" />
<input id="num2" placeholder="0" />
<button id="btnAdd" type="button"> Add</button>
<input id="total" placeholder="0" readonly />
<script type="text/javascript">
   $('document').ready(function () {
           $('#btnAdd').click(function () {
               $('#total').val(add(num1, num2));
       });
    });
</script>
</body>
</html>

When we click on "Add" button, total should be displayed But nothing happens with this code

What do you hope to accomplish with num1.num2? How do you set num1 and num2 when calling add(num1, num2) inside the jQuery? — vol7ron
– vol7ron, Commented Nov 14, 2018 at 2:29

Shidersz · Accepted Answer · 2018-11-14 02:32:36Z

2

You have some errors on your code:

1) you have to get values from the inputs elements.

2) You have a typo error on one of the parseInt() methods.

3) To adds number you where using .? Should no be the + operator.

Check the next example with the fixes:

$('document').ready(function()
{
    $('#btnAdd').click(function ()
    {
        var num1 = $("#num1").val();
        var num2 = $("#num2").val();
        $('#total').val(add(num1, num2));
    });
});

function add(number1, number2)
{
    var num1 = parseInt(number1);
    var num2 = parseInt(number2);
    var num3 = num1 + num2;
    return num3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1> Adding two numbers </h1>
<input id="num1" placeholder="0" />
<input id="num2" placeholder="0" />
<button id="btnAdd" type="button"> Add</button>
<input id="total" placeholder="0" readonly />

edited Nov 14, 2018 at 2:32

answered Nov 14, 2018 at 2:29

Shidersz

17.2k2 gold badges28 silver badges52 bronze badges

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

6 Comments

Jack Bashford Over a year ago

Um, where are the typos in the parseInt() methods in the OP's code? It looks fine to me.

Shidersz Over a year ago

this one: parstInt(number2);

Sudhir Jangam Over a year ago

I changed the code as below, still no change var num1 = $("#num1").val(); var num2 = $("#num2").val(); $('#total').val(add(num1, num2));

Shidersz Over a year ago

@JackBashford I also won't note it if wasn't for the help of the console debug from the snippet tool.

Sudhir Jangam Over a year ago

I corrected the typo in parseInt, now it's working, thanks both of you

|

Shidersz · Accepted Answer · 2018-11-14 02:42:46Z

2

You haven't declared num1 and num2 when you're calling add. Make your code this:

$('document').ready(function () {
    $('#btnAdd').click(function () {
        $('#total').val(add($("#num1").val(), $("#num2").val()));
    });
});

And it should work.

EDIT: Change your add function to this:

function add(number1, number2) {
    var num1 = parseInt(number1);
    var num2 = parseInt(number2);
    var num3 = num1 + num2;
    return num3;
}

The . operator doesn't add two numbers.

edited Nov 14, 2018 at 2:42

Shidersz

17.2k2 gold badges28 silver badges52 bronze badges

answered Nov 14, 2018 at 2:24

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

7 Comments

Sudhir Jangam Over a year ago

$('document').ready(function () { $('#btnAdd').click(function () { $('#total').val(add($("#num1").val(), $("#num2").val())); //$('#total').val(add(num1, num2)); }); });

Sudhir Jangam Over a year ago

still the same result

Jack Bashford Over a year ago

OK, I'll edit my post with what I believe to be the correct code.

Sudhir Jangam Over a year ago

$('document').ready(function () { $('#btnAdd').click(function () { $('#total').val(add($("#num1").val(), $("#num2").val())); //$('#total').val(add(num1, num2)); }); });

Jack Bashford Over a year ago

@SudhirJangam Fixed now, any better?

|

Yazsid · Accepted Answer · 2018-11-14 03:22:06Z

$('document').ready(function()
{
    $('#btnAdd').click(function ()
    {
        var num1 = ( $("#num1").val()==""?0:$("#num1").val());
        var num2 = ( $("#num2").val()==""?0:$("#num2").val());
        $('#total').val(add(num1, num2));
    });
});

function add(number1, number2)
{
    var num1 = parseInt(number1);
    var num2 = parseInt(number2);
    var num3 = num1 + num2;
    return num3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1> Adding two numbers </h1>
<input id="num1" placeholder="0" />
<input id="num2" placeholder="0" />
<button id="btnAdd" type="button"> Add</button>
<input id="total" placeholder="0" readonly />

Maybe an exception if the input is empty is necesary for your problem

( $("#num1").val()==""?0:$("#num1").val());

Collectives™ on Stack Overflow

Jquery using function to return a value

3 Answers 3

6 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related