Calling Javascript Function in HTML with innerHTML tag

Question

My HTML "sum.html" file seems not work with my "mathbox.js" file. I have declare it in the HTML head, however, when checking in Chrome console the num1 and num2 seems to work along with the sum by putting it sum = num1 + num2.

This is my Javascript function;

var num1 = Number(num1);
var num1 = Number(num1);
function calSum(){

    var num1 = document.getElementById("num1").innerHTML;
    var num2 = document.getElementById("num2").innerHTML;
    var add = num1 + num2;
    document.getElementById("sum").inneHTML = add;
}

Below is my HTML

<!DOCTYPE HTML PUBLIC>

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Matchbox</title>
<script type ="text/javascript" src="mathbox.js"></script>
</head>
<body>

<div>




<table border="1">
<tr>
<td style="text-align:right">First number:</td>
<td>
   <input type="text" id = "num1" />
</td>
<td rowspan="2">
   <input type="button" value="Calculate" onclick="calSum()">
</td>
</tr>

<tr>
<td style="text-align:right">Second number:</td>
<td>
   <input type="text" id ="num2" />
</td>
</tr>
</table>

<br>
<table border="1">
<tr>
<td style="text-align:right">Sum:</td>
<td style="width:100px"> <input type="text" id ="sum" onclick="cal" /></td>
</tr>
</table>

</div>
</body></html>

Try document.getElementById("sum").value = add;

rakhi4110
– rakhi4110

2014-02-28 04:06:37 +00:00
Commented Feb 28, 2014 at 4:06 — rakhi4110
– rakhi4110, Commented Feb 28, 2014 at 4:06

Praveen · Accepted Answer · 2014-02-28 04:10:30Z

2

var num1 = Number(num1);  //called only once and it will suffer error

You can't parse it as global variable because each time you have to parse the string values as number and to fetch the value of textbox use value attribute.

function calSum(){
   var num1 = +document.getElementById("num1").value;
           // |_________used to parse the string as number type
   var num2 = +document.getElementById("num2").value;
           // |_________used to parse the string as number type
   var add = num1 + num2;
    document.getElementById("sum").value= add;
}

answered Feb 28, 2014 at 4:10

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

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

7 Comments

IslandKing Over a year ago

So you're saying to remove global num1 and num2 outside of the function?

Praveen Over a year ago

@user2985145 it is not within function, I'm saying there is no use in having var num1 = Number(num1); var num1 = Number(num1); these lines.

IslandKing Over a year ago

Thank you everyone. It now works. You're guys are awesom

Tun Zarni Kyaw Over a year ago

wow! +1 ... is it the safe way to parse the string to number with unary operator +?

Praveen Over a year ago

@TunZarniKyaw Yes you can use, to quote

The unary plus operator precedes its operand and evaluates to its operand but attempts to converts it into a number, if it isn't already.

|

SajithNair · Accepted Answer · 2014-02-28 04:14:18Z

1

document.getElementById("num1") returns a string. You need to convert that to a number before adding using Number(). Otherwise it will do string concatenation. Also instead of using .innerHTML you have to use .value.

function calSum(){

    var num1 = document.getElementById("num1").innerHTML;
    var num2 = document.getElementById("num2").innerHTML;
    var add = Number(num1) + Number(num2);
    document.getElementById("sum").value = add;
}

edited Feb 28, 2014 at 4:14

answered Feb 28, 2014 at 4:08

SajithNair

3,8771 gold badge20 silver badges23 bronze badges

Comments

Butani Vijay · Accepted Answer · 2014-02-28 05:41:02Z

1

You can not use .innerHTML for input type text

use as below :

document.getElementById("sum").value = add;

Replace YOur Function as below:

function calSum(){

    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    var add = parseFloat(num1) + parseFloat(num2);

    //or you can use  var add =  Number(num1) + Number(num2);
    document.getElementById("sum").value= add;
}

edited Feb 28, 2014 at 5:41

answered Feb 28, 2014 at 4:08

Butani Vijay

4,2492 gold badges32 silver badges61 bronze badges

5 Comments

SajithNair Over a year ago

parseInt may not always work without giving the base. as second parameter

Steve Over a year ago

@SajithNair - The second parameter is optional. If omitted it defaults to a radix of 10. If that is what the OP wants is not clear, but it will work.

SajithNair Over a year ago

@Steve This is not correct. Please go and check what is parseInt("0.2") and Number("0.2"). Please make sure you are not misleading the person who is asking doubt.

Steve Over a year ago

@SajithNair - You stated "parseInt may not always work without giving the base. as second parameter". That is a wrong statement. It ALWAYS works without a second parameter. Your example uses parseInt with a string representation of a float. Of course that doesn't work... but that has nothing to do with the second parameter.

Butani Vijay Over a year ago

Thanks Steve & sajith for point me my mistake. i have updated my answer

Padmanathan J · Accepted Answer · 2014-02-28 04:13:27Z

Use this

function calSum(){
    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    var add =  Number(num1) + Number(num2);
    document.getElementById("sum").value = add;
}

In your code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

function calSum(){
    alert('sasa');
    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    var add =  Number(num1) + Number(num2);
    document.getElementById("sum").value = add;
}
</script>
<title>Untitled Document</title>
</head>
<body>

<table border="1">
<tr>
<td style="text-align:right">First number:</td>
<td>
   <input type="text" id="num1" />
</td>
<td rowspan="2">
   <input type="button" value="Calculate" onclick="calSum()">
</td>
</tr>

<tr>
<td style="text-align:right">Second number:</td>
<td>
   <input type="text" id="num2" />
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td style="text-align:right">Sum:</td>
<td style="width:100px"> <input type="text" id ="sum" onclick="cal" /></td>
</tr>
</table>
</body>
</html>

Tun Zarni Kyaw · Accepted Answer · 2014-02-28 04:09:42Z

0

<input type="text" id ="sum" onclick="cal" />

input element doesn't have innerHTML property. You have to use value property in your Javascript.

Just like this ...

document.getElementById("sum").value = add;

answered Feb 28, 2014 at 4:09

Tun Zarni Kyaw

2,1172 gold badges21 silver badges28 bronze badges

Comments

Sarath · Accepted Answer · 2014-02-28 04:14:38Z

0

For the input box we are using value not innerHTML , innerHTML is used for the containers like div,td etc..

so please change your function

function calSum(){
   var num1 = +document.getElementById("num1").value;
   var num2 = +document.getElementById("num2").value;
   var add = num1 + num2;
    document.getElementById("sum").value= add;
}

answered Feb 28, 2014 at 4:14

Sarath

6085 silver badges12 bronze badges

1 Comment

Steve Over a year ago

As others have pointed out, this would do string concatenation. You probably want to make sure num1 and num2 are numbers, not strings.

Anatoliy Nikolaev · Accepted Answer · 2014-02-28 04:51:32Z

0

Change your function as:

function calSum()
{
    var num1 = document.getElementById("num1").value;   
    var num2 = document.getElementById("num2").value;   

    if(!isNaN(num1) && !isNaN(num2))
    {
        add = parseFloat(num1) + parseFloat(num2);
    }   

    document.getElementById("sum").value = add;     
}

edited Feb 28, 2014 at 4:51

Anatoliy Nikolaev

22.8k15 gold badges72 silver badges69 bronze badges

answered Feb 28, 2014 at 4:34

Lehal

113 bronze badges

Collectives™ on Stack Overflow

Calling Javascript Function in HTML with innerHTML tag

7 Answers 7

7 Comments

Comments

5 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

Comments

5 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related