Unable to get property 'style' of undefined or null reference


I have been looking online for a Watermark effect for my textboxes to get some help and found a piece of code which looks like the following :


function WaterMark(objtxt, event) {
var defaultText = "Username";
var defaultpwdText = "Password";
// Condition to check textbox length and event type
if (objtxt.id == "tb_Username" || objtxt.id == "tb_Password") {
    if (objtxt.value.length == 0 & event.type == "blur") {
        //if condition true then setting text color and default text in textbox
        if (objtxt.id == "tb_Username") {
            objtxt.style.color = "Gray";
            objtxt.value = defaultText;
        if (objtxt.id == "tb_Password") {
            document.getElementById("<%= tb_TempPassword.ClientID %>").style.display = "block";
            objtxt.style.display = "none";
// Condition to check textbox value and event type
if ((objtxt.value == defaultText || objtxt.value == defaultpwdText) & event.type == "focus") {
    if (objtxt.id == "tb_Username") {
        objtxt.style.color = "black";
        objtxt.value = "";
    if (objtxt.id == "tb_TempPassword") {
        objtxt.style.display = "none";
        document.getElementById("<%= tb_Password.ClientID %>").style.display = "";
        document.getElementById("<%= tb_Password.ClientID %>").focus();


Then the HTML:

<asp:TextBox runat="server" ID="tb_Username" Text="Username" onblur="WaterMark(this, event);" onfocus="WaterMark(this, event);" />

<asp:TextBox runat="server" ID="tb_TempPassword" Text="Password" onfocus="WaterMark(this, event);" ForeColor="Gray" />

<asp:TextBox runat="server" ID="tb_Password" TextMode="Password" text="Password" Style="display:none" onblur="WaterMark(this, event);"/>

But for some reason when i run my code the Username box works fine but the password box comes up with an error saying:

0x800a138f - JavaScript runtime error: Unable to get property 'style' of undefined or null reference

I have been looking online for a fix and nothing is working? Is this because my Textbox is linking to a CSS stylesheet?

Any help would be greatly appreciated.

asked on Stack Overflow Apr 28, 2014 by user3507542

4 Answers


Try this..

    var id=objtxt.id.toString();
    document.getElementById(id).setAttribute("style", "color:Gray");
answered on Stack Overflow Apr 28, 2014 by Jameem • edited Apr 28, 2014 by Jameem

Please check if you are getting value of document.getElementById("<%= tb_Password.ClientID %>") or not?

value of document.getElementById("<%= tb_Password.ClientID %>") should not be null.

You can also use .hide() and .show() functions.

answered on Stack Overflow Apr 28, 2014 by Aarif Qureshi • edited Jun 13, 2016 by TechnicalKalsa

In my case the following worked -

I placed the script just before closing tag of ( as I am using a masterpage) and instead of writing getelementbyid(menuid.UniqueID) I wrote getelementbyid(menuid.ClientID).

answered on Stack Overflow Jul 10, 2015 by meghna • edited Jul 24, 2017 by K Scandrett

I am also facing this problem and I solve it myself. The issue is related to panel and this panel visible property is false. instead of this set it as display as none value. now its working.

answered on Stack Overflow Mar 27, 2018 by Singaravelan

User contributions licensed under CC BY-SA 3.0