JavaScriptを使用してforループ内のspan要素にテキストを追加するにはどうすればよいですか？

配列とループのあるフォームを検証しようとしています。私は各必要なフィールドに空のスパン要素を作成しました。 JavaScriptで私はこれを設定しました：JavaScriptを使用してforループ内のspan要素にテキストを追加するにはどうすればよいですか？

var name = document.querySelector('#Name').value, 
    firstLastName = document.querySelector('#firstLastName').value, 
    secondLastName = document.querySelector('#secondLastName').value, 
    username = document.querySelector('#username').value, 
    dateBirth = document.querySelector('#dateBirth').value, 
    email = document.querySelector('#email').value, 
    gender = document.querySelector('#gender').value, 
    password = document.querySelector('#password ').value, 
    passwordConfirmation = document.querySelector('#passwordConfirmation').value, 
    span = document.getElementsByTagName("span"), 
    personalData = [name, firstLastName, secondLastName, username, dateBirth, email, gender, password, passwordConfirmation], 
    arrayLength = personalData.length; 



    for (var i = 0; i < arrayLength; i++) { 
    if (personalData[i]== '') { 
     var message = '*Required' 
     span[i].innerHTML = message; /* THIS PART IS NOT WORKING */ 

    }else { 
     var message = '' 
     span[i].innerHTML = message; /* THIS PART IS NOT WORKING */ 
    } 
    }

問題は何ですか？私はこれについて新しいです。ここで

はHTMLコードです：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Regsitrar</title> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    </head> 
    <body class="container-fluid"> 


    <header class="row"> 
     <a href="#"><img class="col-md-2" src="./img/cenfotec-logo.png" alt="Music Logo" width="167px" height="80px"/></a> 
     <h1 class="col-md-6">Welcome!</h1> 
    </header> 

    <section id="form" class="row"> 

     <form class="col-md-6 col-md-offset-3" id="registrationForm" name="RegistrationForm"> 
     <h2>Registration</h2> 
     <table> 
      <tr> 
      <td > 
       <input type="text" placeholder="Name" id="Name"> <br> 
       <span id="errorName" class="span"></span> 
      </td> 
      <td> 
       <input type="text" placeholder="Last Name" id="firstLastName"> 
       <span id="errorFirstLastName" class="span"></span> 
      </td> 
      <td> 
       <input type="text" placeholder="Second Last Name" id="secondLastName"> 
       <span id="errorSecondLastName" class="span"></span> 
      </td> 
      </tr> 
      <tr> 
      <td colspan="3"> 
       <input type="text" placeholder="Username" id="username"> 
      </td> 
      </tr> 
      <tr> 
      <td colspan="3"> 
       <label for="dateBirth">Date of Birth: </label> 
      </td> 
      </tr> 
      <tr> 
      <td colspan="3"> 
       <input type="date" id="dateBirth"> 
      </td> 
      </tr> 

      <tr> 
      <td colspan="3"> 
       <input type="email" placeholder="Email Address" id="email"> 
      </td> 
      </tr> 
      <tr> 
      <td colspan="3"> 
       <select id="gender"> 
       <option value="">--Select Gender--</option> 
       <option value="male">Male</option> 
       <option value="female">Female</option> 
       </select> 
      </td> 
      </tr> 
      <tr> 
      <td colspan="3"> 
       <input type="password" placeholder="Password" id="password"> 
      </td> 
      </tr> 
      <tr> 
      <td colspan="3"> 
       <input type="password" placeholder="Confirm Password" id="passwordConfirmation"> 
      </td> 
      </tr> 
      <tr> 
      <td colspan="3"> 
       <input type="button" value="Create Account" id="btnRegistration"> 
      </td> 
      </tr> 
     </table> 
     </form> 
    </section> 
    <script type="text/javascript" src="js/logicIU.js"></script> 
    </body> 
</html>

出典

2016-12-09 Keneth Smith

あなたのhtmlを表示してください。 – Mairaj

spanでconsole.logを実行できますか、コンソールエラーが表示されますか？ –

OPはどこに行った？ – Mahi

getElementsByTagNameのはspan要素に取り組んでいないように私にはかなりの有線ようです。作業コードの場合

あなたはそのロードfinishs DOM要素の前にスクリプトをロードし、おそらくスパン要素に未定義のエラーを取得している場合は、JsFiddle https://jsfiddle.net/s4cdLrcg/1/

ここでは、この

<span class='.span'>Data1</span> 
<span class='.span'>Data2</span> 

var x = document.getElementsByClassName(".span"); 
x[1].innerHTML = 'works';

を試すことができます。

あなたのHTMLページの下にスクリプトをロードしようとすると、動作します。

出典

2016-12-09 06:50:56 Helios

それはうまくいった。しかし、[1]の代わりに "i"変数を入れると、コンソールからエラーが出ます。 Uncaught TypeError：undefined（...）の 'innerHTML'プロパティを設定できません –

あなたのスクリプトに問題がないことを確認する下のスニペットを見ることができます。

html要素の後にスクリプトを配置する必要があります。

注：何かを入力してボタンをクリックすると、検証メッセージが削除されたことを確認できるように、スクリプト内にvalidate()関数を挿入しました。

しかし、このスニペットは上記のように機能しなくても機能します。

<div> 
 
    <input type="text" id="Name" /> <span></span> 
 
</div> 
 
<div> 
 
    <input type="text" id="firstLastName" /> <span></span> 
 
</div> 
 
<div> 
 
    <input type="text" id="secondLastName" /> <span></span> 
 
</div> 
 
<div> 
 
    <input type="text" id="username" /> <span></span> 
 
</div> 
 
<input type="button" value="Validate" onclick="validate()" /> 
 

 
<script> 
 
    
 
function validate() { 
 
    var name = document.querySelector('#Name').value, 
 
    firstLastName = document.querySelector('#firstLastName').value, 
 
    secondLastName = document.querySelector('#secondLastName').value, 
 
    username = document.querySelector('#username').value, 
 
    //dateBirth = document.querySelector('#dateBirth').value, 
 
    //email = document.querySelector('#email').value, 
 
    //gender = document.querySelector('#gender').value, 
 
    //password = document.querySelector('#password ').value, 
 
    //passwordConfirmation = document.querySelector('#passwordConfirmation').value, 
 
    span = document.getElementsByTagName("span"), 
 
    personalData = [name, firstLastName, secondLastName, username], //, dateBirth, email, gender, password, passwordConfirmation], 
 
    arrayLength = personalData.length; 
 

 

 
    for (var i = 0; i < arrayLength; i++) { 
 
    var message = ''; 
 
    if (personalData[i] == '') { 
 
     message = '*Required'; 
 
    } 
 
    
 
    span[i].innerHTML = message; /* THIS PART IS NOT WORKING */ 
 
    } 
 
} 
 
    
 
    
 
    validate(); 
 
</script>

出典

2016-12-09 07:11:02 Aruna

あなたは（すなわち）関数内のコードを配置する必要があり

<input type="button" value="Validate" onclick="validate()" /> 
function validate(){ 
//Your code 
}

出典

2016-12-09 07:26:53 Samyappa

JSファイルのその部分をコピーして貼り付けませんでした。しかし、変数を作成してイベントリスナーを追加しました。それには問題ありません。とにかくありがとう！ –

JavaScriptを使用してforループ内のspan要素にテキストを追加するにはどうすればよいですか？

答えて

関連する問題