CODEWITHSUNDEEP
javascript
marc_s
marc_s

Reputation: 754528

Even the most basic Javascript is failing on me - but WHY?

I'm struggling with some very basic Javascript here (not a big fan or expert in Javascript at all!), and I just cannot wrap my head around why this fails....

I have some very basic HTML markup:

Value 1: <input type="text" id="int1" /> <br />
Value 2: <input type="text" id="int2" /> <br /><br />

<input type="button" name="add" value="Add" onclick="add();" />

and then some Javascript:

<script type="text/javascript">
onerror = unhandled;

function unhandled(msg, url, line) {
   alert('There was an unhandled exception');
}

function add() {
   alert($("#int1").val() + $("#int2").val());
}
</script>

From my (Pascal- and C#-based) understanding, the add method should read out the values from the input elements with ID's int1 and int2 and add those values and then show the result.

Seems basic and harmless enough......

But even if I do enter two valid integers (like 10 and 20) into those two textboxes, I keep getting an There was an unhandled exception and I just cannot understand what is going wrong here.

Can someone enlighten me??

Upvotes: 0

Views: 241

Answers (5)

Dora07
Dora07

Reputation: 70

$.val() returns a string value. you need to convert both returned strings to numbers and then add the values.

try this

function add() {
    alert(parseFloat($('#int1').val()) + parseFloat($('#int2').val()));`
}

Upvotes: 3

rak
rak

Reputation: 334

Try using binding onclick event instead writing it inline. I have made fiddle for you. Check it out

UPDATE:

http://jsfiddle.net/rkhadse_realeflow_com/FhL9g/7/

  <script>
function add() {
    var int1 = parseInt(document.getElementById("int1").value);
    var int2 = parseInt(document.getElementById("int2").value);
    alert(int1 + int2);
}
    </script>

  Value 1:
<input type="text" id="int1" />
<br />Value 2:
<input type="text" id="int2" />
<br />
<br />
<button onclick="add()">Add</button>

Upvotes: 1

Alex W
Alex W

Reputation: 38193

As it looks like you're using $(..) functions, be sure you're including jQuery on the page, before you use those functions.

Aside from that, I always have scope issues when I put my event handlers in HTML attributes. Try putting them in your code, which has the added benefit of being unobtrusive JavaScript (a new pattern for cleaner, more maintainable code).

Also, add an id to your button:

<input type="button" name="add" value="Add" id="myButton" />

Add event handler in code and remove onclick attribute from your button

document.getElementById('myButton').onclick = add;

Upvotes: 0

Joe
Joe

Reputation: 519

You have a few different issues going on here.

Firstly, if you're using jQuery, it would be best to use a click event instead of an inline function call.

Second, the values are returned as strings from the inputs, so you must convert them by using parseInt()

Also, your error handler is useless if you're not alerting the error message, the msg argument in this case.

onerror = unhandled;

function unhandled(msg, url, line) {
   alert(msg);
}

$("input[name=add]").click(function() {
   var int1 = parseInt($("#int1").val());
   var int2 = parseInt($("#int2").val());
   alert(int1 + int2);
});

Fiddle: http://jsfiddle.net/9bepJ/

Upvotes: 2

isick
isick

Reputation: 1487

Well firstly, .val() will return a string. The addition operator won't add the numeric values of those strings, it will just concatenate the strings.

But that's not causing your exception. Get rid of the everything but the add function. It should work then.

<script type="text/javascript">
    function add() {
       alert($("#int1").val() + $("#int2").val());
    }
</script>

This is, of course, assuming you included the jQuery library since that's where the $() function comes from.

Upvotes: 1

Related Questions