getElementsByClass関数を解析できません

Question

私は等級計算機のウェブサイトを作成しようとしていますが、入力を文字列から整数に変換できないようです。ここに私のコードです：

<form name="myform" action="" method="GET"> 
    <div> 
     <label for="cmps200">CMPS 200</label> 
     <input type="number" name="three" class="threeCredits"> 
     <br> 
    </div> 

    <div> 
     <label for="cmps211">CMPS 211</label> 
     <input type="number" name="three" class="threeCredits"> 
     <br> 
    </div> 

    <div> 
     <label for="cmps212">CMPS 212</label> 
     <input type="number" name="three" class="threeCredits"> 
     <br> 
    </div> 

    <div> 
     <input id="btn" type="button" name="btn" value="Submit" onclick="myF()"> 
    <p> </p> 

    </div> 
</form> 

---

function myF() { 
    var courses3 = document.getElementsByClassName("threeCredits"); 
    var sum = 0; 

    for(var i = 0; i < courses3.length; i++) { 
     sum += parseInt(courses3[i]); 
    } 

    if(sum===0 || sum<=0){ 
     alert("Please enter valid inputs!"); 
    } else { 
     alert(sum/9); 
    } 
} 

私は私がNaNを取得し、送信ボタンを押すたびに。助けてください！

Answer 1

courses3[i]は要素ではなく、価値があります。 courses3[i].valueを使用してください。

また、ifの条件では、<=も実際には===という最初のものをチェックします。あなたがコントロールから値を読むのを忘れて、それ

function myF() { 
 
    var courses3 = document.getElementsByClassName("threeCredits"); 
 
    var sum = 0; 
 

 
    for(var i = 0; i < courses3.length; i++) { 
 
     sum += parseInt(courses3[i].value); 
 
    } 
 

 
    if(sum <= 0){ 
 
     alert("Please enter valid inputs!"); 
 
    } else { 
 
     alert(sum/9); 
 
    } 
 
}

<form name="myform" action="" method="GET"> 
 
    <div> 
 
     <label for="cmps200">CMPS 200</label> 
 
     <input type="number" name="three" class="threeCredits"> 
 
     <br> 
 
    </div> 
 

 
    <div> 
 
     <label for="cmps211">CMPS 211</label> 
 
     <input type="number" name="three" class="threeCredits"> 
 
     <br> 
 
    </div> 
 

 
    <div> 
 
     <label for="cmps212">CMPS 212</label> 
 
     <input type="number" name="three" class="threeCredits"> 
 
     <br> 
 
    </div> 
 

 
    <div> 
 
     <input id="btn" type="button" name="btn" value="Submit" onclick="myF()"> 
 
    <p> </p> 
 

 
    </div> 
 
</form>

Answer 2

だから、削除することができparseInt(courses3[i].value)

function myF() { 
 
    var courses3 = document.getElementsByClassName("threeCredits"); 
 
    var sum = 0; 
 

 
    for(var i = 0; i < courses3.length; i++) { 
 
     sum += parseInt(courses3[i].value); 
 
    } 
 

 
    if(sum===0 || sum<=0){ 
 
     alert("Please enter valid inputs!"); 
 
    } else { 
 
     alert(sum/9); 
 
    } 
 
}

<form name="myform" action="" method="GET"> 
 
    <div> 
 
     <label for="cmps200">CMPS 200</label> 
 
     <input type="number" name="three" class="threeCredits"> 
 
     <br> 
 
    </div> 
 

 
    <div> 
 
     <label for="cmps211">CMPS 211</label> 
 
     <input type="number" name="three" class="threeCredits"> 
 
     <br> 
 
    </div> 
 

 
    <div> 
 
     <label for="cmps212">CMPS 212</label> 
 
     <input type="number" name="three" class="threeCredits"> 
 
     <br> 
 
    </div> 
 

 
    <div> 
 
     <input id="btn" type="button" name="btn" value="Submit" onclick="myF()"> 
 
    <p> </p> 
 

 
    </div> 
 
</form>

の