javascript innerHTML is not working in asp.net web form

Question

Here is the asp.net web form:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
    <h2 id="first">Enter 1st Number<input type="text"  /></h2>
     <h2 id ="second">Enter 2nd Number<input type="text"  /></h2>
     <h2 id="third">Enter 3rd Number<input type="text"  /></h2>
    <button onclick="test()">Sublit</button>


</div>

    <p id="sum"></p>
</form>
<script src="JavaScript.js"></script>

And this is the javascript file:

function test()
{
    var num1 = parseInt(document.getElementById("first").value)
    var num2 = parseInt(document.getElementById("second").value)
    var num3 = parseInt(document.getElementById("third").value)

    var z = num1 + num2 + num3
    document.getElementById("sum").innerHTML = z
}

When I am pressing submit button sum of three no is not showing in page. It showws NAN once and after that it disappears. I started learning .net. Help me plz

Mamun · Accepted Answer · 2018-06-23 16:12:34Z

1

You have set ids to the wrong elements. Set id's to input elements:

 <h2>Enter 1st Number<input id="first" type="text"  /></h2>
 <h2>Enter 2nd Number<input id ="second" type="text"  /></h2>
 <h2>Enter 3rd Number<input id="third" type="text"  /></h2>

Working Code Example:

function test(){
    var num1 = parseInt(document.getElementById("first").value)
    var num2 = parseInt(document.getElementById("second").value)
    var num3 = parseInt(document.getElementById("third").value)

    var z = num1 + num2 + num3
    document.getElementById("sum").innerHTML = z
}

<form id="form1" runat="server">
  <div>
    <h2>Enter 1st Number<input id="first" type="text"  /></h2>
    <h2>Enter 2nd Number<input id ="second" type="text"  /></h2>
    <h2>Enter 3rd Number<input id="third" type="text"  /></h2>
    <button type="button" onclick="test()">Sublit</button>
  </div>

  <p id="sum"></p>
</form>

answered Jun 23, 2018 at 16:12

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

1 Comment

brk Over a year ago

why using button type button inside form?

brk · Accepted Answer · 2018-06-23 16:15:02Z

You are adding id to the h tag but you need to add id attribute to input element to get it's value using document.getElementById.

Also button default type is submit , you need to prevent the default behavior or change button type='button'

function test(e) {
  e.preventDefault()
  var num1 = parseInt(document.getElementById("first").value)
  var num2 = parseInt(document.getElementById("second").value)
  var num3 = parseInt(document.getElementById("third").value)

  var z = num1 + num2 + num3
  document.getElementById("sum").innerHTML = z
}

<form id="form1" runat="server">
  <div>
    <h2>Enter 1st Number<input id="first" type="text" /></h2>
    <h2>Enter 2nd Number<input id="second" type="text" /></h2>
    <h2>Enter 3rd Number<input id="third" type="text" /></h2>
    <button onclick="test(event)">Sublit</button>


  </div>

  <p id="sum"></p>
</form>

Paaarth · Accepted Answer · 2018-06-23 16:21:25Z

0

function test() {
    var num1 = parseInt(document.getElementById("first").value)
    var num2 = parseInt(document.getElementById("second").value)
    var num3 = parseInt(document.getElementById("third").value)

    var z = num1 + num2 + num3
    document.getElementById("sum").innerHTML = z
}

<form id="form1" runat="server">
   <div>
      <h2 >Enter 1st Number<input type="text" id="first" /></h2>
      <h2 >Enter 2nd Number<input type="text" id ="second"  /></h2>
      <h2 >Enter 3rd Number<input type="text" id="third"  /></h2>
      <button onclick="test()">Sublit</button>
   </div>
<p id="sum"></p>
</form>

You need to give id to inputs not <h2> elements will solve the problem

edited Jun 23, 2018 at 16:21

answered Jun 23, 2018 at 16:15

Paaarth

4,4693 gold badges26 silver badges39 bronze badges

Comments

Syed Muhammad Faiz · Accepted Answer · 2018-06-23 16:24:33Z

0

First you need to set id in input not in h2 tag.

 <h2 >Enter 1st Number<input type="text"  id="first" /></h2>
 <h2 >Enter 2nd Number<input type="text" id ="second" /></h2>
 <h2 >Enter 3rd Number<input type="text"  id="third"/></h2>

and for disappear issue use input type button instead of button tag to prevent reload.

 <input type="button" value="Submit" onclick="test()">

answered Jun 23, 2018 at 16:24

Syed Muhammad Faiz

715 bronze badges

Collectives™ on Stack Overflow

javascript innerHTML is not working in asp.net web form

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related