我无法解析getElementsByClass函数

时间:2017-01-26 08:40:39

标签: javascript html5

我正在尝试使用成绩计算器网站,但我似乎无法将字符串中的输入转换为整数。这是我的代码:

 <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。请帮助!

2 个答案:

答案 0 :(得分:2)

您的courses3[i]是一个元素,而不是它的价值。使用courses3[i].value

同样在if条件下,<=实际上也会检查第一个===。所以你可以删除它

&#13;
&#13;
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);
    }
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您忘记了从控件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>