javascript - 未捕获的 TypeError : Cannot read property 'appendChild' of null. 在我的代码中找不到错误-6ren

javascript - 未捕获的 TypeError : Cannot read property 'appendChild' of null. 在我的代码中找不到错误

转载作者：行者123 更新时间：2023-12-02 15:54:23

25

4

所以，首先，我的代码还没有完成。但是，以下 Javascript 部分应该在单击图像时更改站点语言。我读到(在这里的其他帖子上)这可能是因为整个 html 文档尚未完成加载？不管怎样，这是我的代码:希望我能深入了解导致错误的原因:

<DOCTYPE! html>
 <html>
    <head>
      <title> Registration</title>
      <link type="text/css" rel="stylesheet" href="stylesheetex3.css"/>
      <script>
             function changeLanguage()
            {
               document.getElementById("z").addEventListener("click");
               var Username1= document.getElementById("User");
               var Password1= document.getElementById("Pass");
               var Retype1= document.getElementById("Pass2");
               var Firstname1= document.getElementById("First");
               var Middlename1= document.getElementById("Second");
               var LastName1= document.getElementById("Third");
               var email1 = document.getElementById("at");
               var NomUtilisateur1 = document.createTextNode("Nom D'utilisateur");
               var mdp1 = document.createTextNode("Mot de Passe");
               var mdp21 = document.createTextNode("Verification du mot de passe");
               var Prenom1 = document.createTextNode("Prenom");
               var Prenom2 = document.createTextNode("Deuxieme prenom");
               var NomdeFamilly1 = document.createTextNode("Nom de Famille");
               var Email1 = document.createTextNode("Addresse courielle");
               Username1.appendChild(NomUtilisateur1);
               Password1.appendChild(mdp1);
               Retype1.appendChild(mdp21);
               Firstname1.appendChild(Prenom1);
               Middlename1.appendChild(Prenom2);
               LastName1.appendChild(NomdeFamilly1);
               email1.appendChild(Email1);
            }


        </script>
    </head>
<body>
    <h1>Registration Form</h1>
    <div>
        <div>please fill out the form below</div>
        <div class="Img">
            <img id="z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRR2pntKihP8gow1vBejsXhgYmHDctgwjcXKWKk9y0PEXsXEbUxpELQ" onClick="changeLanguage()" />
        </div>
        <form>
            <fieldset> 
                <legend id="login"> Login Details </legend>
                <p>Username* <input type="text" name="Username" id="User"></p>
                <p>Password* <input type="Password" name="Password" id="Pass"></input</p>
                <p>Retype Password*<input type="Password" name="RetypePassword" onChange="checkPasswordMatch();" id="Pass2"></input></p>
            </fieldset>
            <fieldset>
                <legend>User Data</legend>
                <p>Firstname* <input type="text" name="firstName"></input id="First"></p>
                <p>Middlename*<input type="text" name="middleName" id="Second"></input></p>
                <p>LastName*<input type="text"  name="lastName" id="Third"></input></p>
                <p>Email*<input type="email" name="email" id="at"> </input></p>
            </fieldset>

            <input type="submit" value="Submit"></input>
        </form>
    </div>
</body>

最佳答案

<input type="text" name="firstName"></input id="First"> 中有语法错误

此外，您不能将子元素附加到输入元素，而是可以将它们作为其同级元素插入

function changeLanguage() {
  document.getElementById("z").addEventListener("click");
  var Username1 = document.getElementById("User");
  var Password1 = document.getElementById("Pass");
  var Retype1 = document.getElementById("Pass2");
  var Firstname1 = document.getElementById("First");
  var Middlename1 = document.getElementById("Second");
  var LastName1 = document.getElementById("Third");
  var email1 = document.getElementById("at");
  var NomUtilisateur1 = document.createTextNode("Nom D'utilisateur");
  var mdp1 = document.createTextNode("Mot de Passe");
  var mdp21 = document.createTextNode("Verification du mot de passe");
  var Prenom1 = document.createTextNode("Prenom");
  var Prenom2 = document.createTextNode("Deuxieme prenom");
  var NomdeFamilly1 = document.createTextNode("Nom de Famille");
  var Email1 = document.createTextNode("Addresse courielle");

  insertAfter(NomUtilisateur1, Username1);
  insertAfter(mdp1, Password1);
  insertAfter(mdp21, Retype1);
  insertAfter(Prenom1, Firstname1);
  insertAfter(Prenom2, Middlename1);
  insertAfter(NomdeFamilly1, LastName1);
  insertAfter(Email1, email1);
}

function insertAfter(node, anchor){
  if(anchor.nextSibling){
    anchor.parentNode.insertBefore(node, anchor.nextSibling);
  }else{
    anchor.parentNode.appendChild(node);
  }
}

<h1>Registration Form</h1>

<div>
  <div>please fill out the form below</div>
  <div class="Img">
    <img id="z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRR2pntKihP8gow1vBejsXhgYmHDctgwjcXKWKk9y0PEXsXEbUxpELQ" onClick="changeLanguage()" />
  </div>
  <form>
    <fieldset>
      <legend id="login">Login Details</legend>
      <p>Username*
        <input type="text" name="Username" id="User" />
      </p>
      <p>Password*
        <input type="Password" name="Password" id="Pass" />
      </p>
      <p>Retype Password*
        <input type="Password" name="RetypePassword" onChange="checkPasswordMatch();" id="Pass2"/>
      </p>
    </fieldset>
    <fieldset>
      <legend>User Data</legend>
      <p>Firstname*
        <input type="text" name="firstName" id="First" />
      </p>
      <p>Middlename*
        <input type="text" name="middleName" id="Second" />
      </p>
      <p>LastName*
        <input type="text" name="lastName" id="Third" />
      </p>
      <p>Email*
        <input type="email" name="email" id="at" />
      </p>
    </fieldset>
    <input type="submit" value="Submit" />
  </form>
</div>

注意:输入元素没有结束标签

关于javascript - 未捕获的 TypeError : Cannot read property 'appendChild' of null. 在我的代码中找不到错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31666895/

25

4

0

文章推荐： JavaScript – 从上到下添加表格行

文章推荐： javascript - 为什么数组不能用文字添加原型(prototype)？

文章推荐： javascript - 如何使用数组打印偶数

java - 几个 "ChildException"捕获 block 与一个 "Exception"捕获 block
多个 ChildException catch block 和一个 Exception catch block 之间哪个更好？更好，我的意思是以良好的实践方式。举例说明: public stati
通过测试连接进行Powershell尝试/捕获
我正在尝试将脱机计算机记录在文本文件中，以便以后可以再次运行它们。似乎没有被记录或捕获。 function Get-ComputerNameChange { [CmdletBinding()]
scala - 拦截与尝试/捕获
我正在将 Scala 'try/catch' 测试代码转换为使用 'intercept' 有没有我不应该使用“拦截”的场景？使用 'intercept' 而不是 'try/catch' 的唯一好处是简
erlang - 如何在Erlang中进行尝试/捕获
我对erlang很陌生，我正在尝试使用基本的try/catch语句来工作。我正在使用Webmachine处理一些请求，我真正想做的就是解析一些JSON数据并将其返回。如果JSON数据无效，我只想返回一
delphi - 捕获 'delete'按键
我不知道如何捕获删除按键。我发现在 ASCII 代码表中，它位于 127 位，但是 if (Key = #127) then 却无济于事。然后我检查了 VK_DELETE 的值，它是 47。尝试使用
php - 对所有PDO查询进行一次全局尝试{}捕获{}
我很少在失败时对数据库查询使用唯一的错误消息我经常使用简短的标准消息，例如“数据库错误/失败。请与网站管理员联系”或类似的消息。或自动发送给我我正在寻找一种在PDO中全局设置一次try {}和ca
Java : CompletableFuture 捕获
我有一个变量CompletableFuture completableFuture 。我希望能够使用任何类型的对象来完成它。例如:completableFuture.complete(new Stri
Java 捕获 IOException
我认为这是基本的东西，但我不知道该怎么做。为什么我得到 IOException never throw in body of相应的 try 语句 public static void main(Str
java - 捕获 JSONException
我在此代码中遇到 JSON 异常: JSONObject jObject = new JSONObject(JSONString); pontosUsuario.setIdUsuari
单引号之间的 Perl 捕获
我正在尝试打印出用单引号括起来的文本。 /bin/bash -lc '/home/CASPER_REPORTS/scripts/CASPER_gen_report.sh CASPER_1' /bin/
java - 捕获 IllegalArgumentException？
我这里遇到了一点问题。我想弄清楚如何捕获 IllegalArgumentException。对于我的程序，如果用户输入负整数，程序应该捕获 IllegalArgumentException 并询问用户
java - 捕获 EJBTransactionRolledbackException
我无法理解 EJBTransactionRolledbackException。我有实体: @Entity public class MyEntity { @Id @Generate
.net - 实时网络使用统计监控/捕获？
对于我给自己提出的以下挑战，如果社区的经验给我任何建议，我将不胜感激 - 即，这里有任何关于最佳方法/方向的指示吗？要求允许收集/实时监控从用户 Windows PC 到一组特定 IP 地址(或
exception - 捕获 SAPSQL_DATA_LOSS
我想在我的 ABAP 代码中捕获并处理 SAPSQL_DATA_LOSS。我试过这个: try. SELECT * FROM (rtab_name) AS rtab
java - 捕获 UnsatisfiedLinkError
我知道捕获错误不是一个好的做法，但在这种情况下，这样做很重要。我正在尝试运行一个包含游戏一部分的 jar，但它给了我一个 unsatisfiedlink 错误，但这是有趣的部分:我正在使用这段代码:
java - 捕获 GenericJDBCException
我有一个表单页面，当我保存它时，它会覆盖数据库。表单页面中有一个文本框，允许用户输入 4000 个字符，但如果用户输入的字符超过此值，则会出现以下错误: ERROR 15:54:05 Abstrac
Python键绑定(bind)/捕获
我想知道在python中绑定(bind)键的最简单方法例如，默认的 python 控制台窗口出现并等待，然后在 psuedo -> if key "Y" is pressed: print (
java - 捕获 NumberFormatException
下面是别人写的类。我面临的问题是，当它进入parse method时与 null as the rawString ，它正在扔NumberFormatException 。所以我想做的是，我应该捕
jquery - 捕获/拦截所有鼠标点击
我有一个简单的脚本，可以捕获所有鼠标单击，除非您单击实际有效的内容。链接、Flash 视频等。我如何调整它，以便无论用户点击什么，在视频加载、新页面加载等之前，它都会发送我构建的简单 GET 请求？
当选择列表值更改而没有更改事件时，Jquery 捕获
我有一个带有一些选择列表的表单，当选择某些值时，这些列表将显示/隐藏更多输入字段。问题是大多数用户都是数据输入人员，因此他们在输入数据时大量使用键盘，并且选择列表的 change 事件仅在焦点离开输

首页

博学

6Ren·AI

商城

javascript - 未捕获的 TypeError : Cannot read property 'appendChild' of null. 在我的代码中找不到错误