CODEWITHSUNDEEP
javascripthtmlasp.net
Punam
Punam

Reputation: 25

javascript innerHTML is not working in asp.net web form

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

Upvotes: 0

Views: 918

Answers (4)

Syed Muhammad Faiz
Syed Muhammad Faiz

Reputation: 71

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()">

Upvotes: 0

Parth Raval
Parth Raval

Reputation: 4423

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

Upvotes: 0

brk
brk

Reputation: 50291

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>

Upvotes: 0

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 1

Related Questions