未捕获的类型错误：无法将属性“类型”设置为 null答案

【问题标题】：Uncaught TypeError: Cannot set property 'type' of null未捕获的类型错误：无法将属性“类型”设置为 null
【发布时间】：2020-07-11 17:59:27
【问题描述】：

我正在使用 asp.net 中的母版页，并在 chrome 浏览器检查工具控制台中收到以下错误。

未捕获的类型错误：无法将属性“类型”设置为 null 在 myFunction (StudentPassword.aspx:258) 在 HTMLInputElement.onclick

我猜问题出在脚本标签上。我应该把它放在哪里？在标签内还是在内容页的底部还是在母版页的底部？

母版页是：

  <%@ 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>

内容页面代码如下：

 <%@ 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>

【问题讨论】：

这能回答你的问题吗？ getElementById not finding control generated by ASP.net
var pwd = document.querySelector("[id$=myCheck]")。省略服务器端生成的父 id 链。

标签： javascript html asp.net

【解决方案1】：

ASP.Net 将所有id 从服务器端运行的父元素链接到当前元素的id，除非在服务器上被覆盖。所以输出的id 实际上看起来像ContentPlaceHolder1$Content3$form1$password。

您可以使用 end-with 选择器来省略它。

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

但请注意，仍然要选择唯一的 id，这也将使用 end-with 是唯一的。

或者，您可以使用数据属性并在其上进行选择：

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

最后你可以使用类似的东西：

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

然而我从来没有真正喜欢过它，它要求脚本是内联的。

【讨论】：

【解决方案2】：

您收到错误是因为脚本在 DOM 完全呈现之前被加载。尝试将脚本的内容放在 document.ready 中，这应该可以解决问题。

【讨论】：

问题是 id 的元素与 runat="server"get 与所有父级链接在一起，除非通过覆盖阻止。所以输出的id 类似于ContentPlaceHolder1$Content3$form1$password。