Uncaught TypeError: Cannot set property 'type' of null

Question

I'm using the master page in asp.net and receiving the following error in the chrome browser inspection tool console.

Uncaught TypeError: Cannot set property 'type' of null at myFunction (StudentPassword.aspx:258) at HTMLInputElement.onclick

I guess that the problem is with the script tag. where should I place it? Inside tag or at the bottom of content page or at the bottom of the master page?

Masterpage is:

  <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Student.master.cs" Inherits="Project_Placements.Student" %>

 <!DOCTYPE HTML>

 <HTML>
 <head runat="server">
 </head>
 <body>
 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
  <script type="text/javascript">
   
       function myFunction() {
           var checkBox = document.getElementById("myCheck");
           var pwd = document.getElementById("password");
           if (checkBox.checked == true) {
               pwd.type = 'password';
           } else {
               pwd.type = 'text';
           }
       }
   }
   </script>    
   </body>
   </html>

and the content page code is as follows:

 <%@ Page Title="" Language="C#" MasterPageFile="~/Student.Master" AutoEventWireup="true" 
 CodeBehind="StudentPassword.aspx.cs" Inherits="Project_Placements.WebForm7" %>

 <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">    
<form id="form1" runat="server">
 <asp:TextBox ID="password" runat="server"  TextMode="Password" ></asp:TextBox>
 <label for="myCheck">Show Password :</label> 
  <input type="checkbox" id="myCheck" onclick="myFunction()">
  </form>
  </asp:Content>

Does this answer your question? [getElementById not finding control generated by ASP.net](https://stackoverflow.com/questions/4595823/getelementbyid-not-finding-control-generated-by-asp-net) — Ivar, Jul 11 '20 at 18:03
`var pwd = document.querySelector("[id$=myCheck]")`. To omit the serversided generated parent id chain. — Lain, Jul 11 '20 at 18:04

Lain · Accepted Answer · 2020-07-11T18:25:25.450

ASP.Net chains up all id from serverside ran parent elements to the id of the current element, unless overwritten on the server. So the outputted id actually looks something like ContentPlaceHolder1$Content3$form1$password.

You can use the ends-with selector to omit this.

var pwd = document.querySelector("[id$=password]").

Yet be aware to still choose unique id which will also be unique using ends-with.

Alternatively you could use a data-attribute and select on that:

<asp:TextBox ID="password" runat="server"  TextMode="Password" data-id="password" />
var pwd = document.querySelector("[data-id=password]");

Finally you could use something like:

var pwd = document.getElementById('<%=password.ClientID %>');

Yet I never really liked it and it demands the script to be inline.

score -1 · Answer 2 · answered Jul 11 '20 at 18:10

-1

You are getting the error because the script is getting loaded before the DOM is being rendered completely. Try placing the content of your script inside document.ready and that should solve the problem.

answered Jul 11 '20 at 18:10

Sudhanshu Shekhar

361
5
15

The issue is that the `id` of elements with `runat="server"`get chained up with all the parents, unless prevented by overwriting. So the outputed `id` is something like `ContentPlaceHolder1$Content3$form1$password`. – Lain Jul 11 '20 at 18:15

Uncaught TypeError: Cannot set property 'type' of null

2 Answers2