Question

所以，首先，我没有完成我的代码。但是，下面的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>

Answer 1

<input type="text" name="firstName"></input id="First">

中存在语法错误

此外，您不能将子项附加到input元素，而是可以将它们作为其兄弟

插入

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>

注意：输入元素没有结束标记

未捕获的TypeError：无法读取null的属性'appendChild'。在我的代码

1 个答案: