Question

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

2020-07-11

1182

javascript html asp.net

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

未捕获的 TypeError：无法将属性“type”设置为 null at myFunction (StudentPassword.aspx:258) at 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>

Answer 1

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

您可以使用 ends-with 选择器来省略这一点。

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

但请注意，仍然选择唯一的 id ，使用 ends-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 %>');

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

Answer 2

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