Difference between Value and innerHtml property in Javascript

Posted by vishalneeraj-24503 under JavaScript category on | Points: 40 | Views : 2700
Hi all,

In c# or vb.net,we use the Text property for assigning or accessing value of Textbox,Label,Button control.

But in Javascript,it's different, for Textbox and Button we use value property whereas we use innerHtml property for Label,Division tag.

We can understand it by an example:-

Suppose,we have Label,Textbox,Button and Division control in a aspx page as shown:-

<asp:Label ID="lbl_message" runat="server" Text="Vishal"></asp:Label>
<asp:Button ID="btn_save" runat="server" Text="Save" />
<asp:TextBox ID="txt_user_name" runat="server"></asp:TextBox>
<div id="div_details"></div>

//Now make a function

<script type="text/javascript">
function get_value()
var txt_name = document.getElementById('<%=txt_user_name.ClientID%>').value;
var lbl_message = document.getElementById('<%=lbl_message.ClientID%>').innerHTML;
var div_details = document.getElementById('div_details').innerHTML;
var btn_save = document.getElementById('<%=btn_save.ClientID%>').value;

alert("Text of Label is: " + lbl_message);
alert("Value of TextBox is: " + txt_name);
alert("InnerHTML of Div is: " + div_details);
alert("Text of Button is: " + btn_save);

//call it on body' onload event as shown below:-
<body onload="get_value();">

Note:- if we give var lbl_message = document.getElementById('<%=lbl_message.ClientID%>').value,then it will give us "undefined",

Comments or Responses

Login to post response