キャッチされない例外TypeError：ここ</p> <blockquote> <p>Uncaught TypeError: Cannot read property 'checked' of undefined.</p> </blockquote> <p> ：プロパティを読み取ることができません。しかし、私はこのエラーを得続ける、チェックボックス

Question

私は、ユーザーが少なくとも一つをチェックしていることを確認するために私のチェックボックスを検証する 、未定義の「確認しました」チェックボックスのための

<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery@worldbook.com" method="post"> 
    Name (Required): <input type="text" name="userName" id="userName" required=""><br> E-Mail (Required): <input type="text" name="mail" id="mail" required=""><br> Phone (Required): <input type="text" name="phone" id="phone" required="" onchange="validNumber()"><br> 
    <br> 
    <p>Please choose your favourite types of books.(check all that apply)</p> 
    <input type="checkbox" name="books" value="Science Fiction">Science Fiction 
    <input type="checkbox" name="books" value="Travel Guide">Travel Guide 
    <input type="checkbox" name="books" value="Short Story Collection">Short Story Collection 
    <input type="checkbox" name="books" value="Other">Other <br> 
    <textarea></textarea><br> 
    <input type="submit" name="submit"> 
    <input type="reset" name="reset"> 
</form> 

とJavaScriptの一部：

function validChoice() 
    { 
     var bookChoice = document.userSurvey.books.value; 
     var x= ""; 


     for (i=0;i< 4;i++) 
     { 
      if (document.userSurvey['bookChoice'+i].checked) 
      { 
       bookChoice = document.userSurvey['bookChoice'+i].value; 
       x = x +"\n"+ bookChoice;   
      } 
     } 

     if (bookChoice == "") 
     { 
      window.alert("You must select at least one book category."); 
       return false; 
      } 
     else 
     { 
      var userName = document.userSurvey.userName.value; 
      var eMail = document.userSurvey.email.value; 
      var phoneNo = document.userSurvey.phone.value;  
      return true; 
    } 
} 

HTMLの一部であり、

私は現在JavaScriptで学んでいますので、私はJavaScriptだけでヘルプが好きです。 JSFiddle上

全コード： https://jsfiddle.net/7qh5segc/

Answer 1

あなたは、いくつかのタグ名を逃したとJS機能でそれらをmissspell：

<h1>User Survey</h1> 

<h2><strong>User Information</strong></h2> 
<p>Please enter your details below</p> 
<br> 
<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery@worldbook.com" method="post"> 
Name (Required): 
<input type="text" name="userName" id="userName" required=""> 
<br> E-Mail (Required): 
<input type="text" name="email" id="email" required=""> 
<br> Phone (Required): 
<input type="text" name="phone" id="phone" required="" onchange="validNumber()"> 
<br> 
<br> 
<p>Please choose your favourite types of books.(check all that apply)</p> 
<input type="checkbox" name="books" value="Science Fiction">Science Fiction 
<input type="checkbox" name="books" value="Travel Guide">Travel Guide 
<input type="checkbox" name="books" value="Short Story Collection">Short Story Collection 
<input type="checkbox" name="books" value="Other">Other 
<br> 
<textarea></textarea> 
<br> 
<input type="submit" name="submit"> 
<input type="reset" name="reset"> 

</form> 

とjsのコードは次のようになります：

function validName() { 
    var name = document.userSurvey.userName.value; 


    if (!/^[a-zA-Z]*$/g.test(name)) { 
    alert("Please enter letters a - z only"); 
    document.userSurvey.userName.focus(); 
    return false; 
    } else { 
    return true; 
    } 


} 

function validNumber() { 
    var theNumbersOnly = ""; 
    var theChar = ""; 
    var theInput = document.userSurvey.phone.value; 

    for (i = 0; i < theInput.length; i++) { 
    theChar = theInput.substring(i, i + 1); 
    if (theChar >= "0" && theChar <= "9") { 
     theNumbersOnly = "" + theNumbersOnly + theChar; 
    } 
    } 

    if (theNumbersOnly.length < 10) { 
    alert("You must enter 10 numbers."); 
    document.userSurvey.phone.focus(); 
    } else { 
    var areacode = theNumbersOnly.substring(0, 3); 
    var exchange = theNumbersOnly.substring(3, 6); 
    var extension = theNumbersOnly.substring(6, 10); 
    var newNumber = "(" + areacode + ") "; 
    newNumber += exchange + "-" + extension; 

    document.userSurvey.phone.value = newNumber; 
    return true; 
    } 
} 



function validEmail() { 
    var email = document.userSurvey.email.value; 
    var atLoc = email.indexOf("@", 1); 
    var dotLoc = email.indexOf(".", atLoc + 2); 
    var len = email.length; 


    if (atLoc > 0 && dotLoc > 0 && len > dotLoc + 2) { 
    return true; 
    } else { 
    alert("Please enter your e-mail address properly."); 
    return false; 
    } 
} 



function validChoice() { 
    //var bookChoice = document.userSurvey.books.value; 
    var bookChoice; 
    var x = ""; 


    for (var i = 0; i < 4; i++) { 
    if (document.userSurvey.books[i].checked) { 
    console.log(document.userSurvey); 
     bookChoice = document.userSurvey.books[i].value; 
     x = x + "\n" + bookChoice; 
    } 
    } 

    if (bookChoice == "") { 
    window.alert("You must select at least one book category."); 
    return false; 
    } else { 
    var userName = document.userSurvey.userName.value; 
    var eMail = document.userSurvey.email.value; 
    var phoneNo = document.userSurvey.phone.value; 
    console.log(userName); 
    console.log(eMail); 
    console.log(phoneNo); 
    return true; 
    } 
} 




function validAll() { 
    if ((validName() == true) && (validEmail() == true) && (validNumber() == true) && (validChoice() == true)) { 
    return true; 
    } else { 
    return false; 
    } 
} 

ます電子メールタグ名も忘れてしまった。あなたには次のコードを使用してチェックボックスの問題を修正できます：

Answer 2

この場合、すべてのチェックボックスを取得するための賢明な方法は、共有された「名前」属性を使用することです。構造が異なる場合は、他の方法があります。 CSSクラスを使用するか、他のカスタム属性を要素に追加します。

変更されたvalidChoice（）関数を使用したデモについては、https://jsfiddle.net/7qh5segc/3/を参照してください。