个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 15:54:23 25 4
gpt4 key购买 nike

所以，首先，我的代码还没有完成。但是，以下 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 - 如何使用数组打印偶数
文章推荐： javascript - 尝试使用 javaScript 创建简单的幻灯片，但图像没有改变
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com