显示if ... else会导致HTML

时间：2014-01-31 03:39:20

标签： javascript html if-statement

有没有人可以帮我找出一个更好的方法来根据我的if ... else逻辑返回正确的信息？所以我试图通过下拉菜单计算学生的GPA。每个字母都是您的标准票价（A = 4.0，B = 3.5等）。现在，如果学生的计算GPA>≥3.5，我想显示某条消息。如果它更低，我会显示另一条消息。我很难弄清楚如何根据条件打印消息。

    function letterToGrade(gpa){
var grade;
switch (gpa) 
    {
    case "A": grade = 4.0;
        break;
    case "B": grade = 3.0;
        break;
    case "C": grade = 2.0;
        break;
    case "D": grade = 1.0;
        break;
    case "F": grade = 0.0;
        break;
    }
    return grade;
}

function calculateGPA(){

var numOfRequisites = 5;
var gpa1 = letterToGrade(document.getElementById("Foundation").value);
var gpa2 = letterToGrade(document.getElementById("Database").value);
var gpa3 = letterToGrade(document.getElementById("Elect").value);
var gpa4 = letterToGrade(document.getElementById("Commerce").value);
var gpa5 = letterToGrade(document.getElementById("HealthInfo").value);
var gpaTotal = (gpa1 + gpa2 + gpa3 + gpa4 + gpa5)/numOfRequisites ;
var result = "<p>Your calculated GPA is: "+(gpaTotal.toFixed(1))+"<br></p>";
if (gpaTotal >= 3.5)
    return result += "<p>Congratulations! Based on your GPA, we will move forward with your application " + 
"for this prestigious internship program.</p>";
else 
    return result += "<p>Thank you for your interest in this program. Unfortunately at this time, " +
"we are unable to continue with your application due to our strict GPA standards. Please try again " + 
"at a later time.</p>";
document.getElementById("result").innerHTML=result;
}

这是HTML。不是全部。 

<h4>Thank you for your interest in our summer internship program. Please enter your GPA for the following courses. </h4>
<p>
IT 3503 Foundation of HIT:
<select id="Foundation">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>F</option>
</select>
    <br/>
IT 4153 Advanced Database:
<select id="Database">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>F</option>
</select>
    <br/>
IT 4513 Elect Health Rec Sys & Ap:
<select id="Elect">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>F</option>
</select>
    <br/>
IT 4123 Electronic Commerce:
<select id="Commerce">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>F</option>
</select>
    <br/>
IT 4533 Health Info Sec & Priv:
<select id="HealthInfo">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>F</option>
</select>
    <br/>
</form>
<input type="button" value="Submit" onclick="calculateGPA()" />

</p>

最后一部分让我感到困惑。我是HTML和Javascript的新手。这是一个学校作业，所以请随意侮辱我，因为你会成为一个懒散的人。

3 个答案:

答案 0 :(得分：2)

你有几个问题

  1. grade永远不会被定义
  2. 在执行其他代码之前返回
  3. numGrade未定义。可能意味着CalculateGPA为numGrade，反之亦然

    4. 所以

    function CalculateGPA(){
    //grade here is undefined as it isnt declared before here
    switch (grade) {
        case "A": 
            grade = 4.0;
        break;
        case "B": 
            grade = 3.0;
            break;
        case "C": 
            grade = 2.0;
        break;
        case "D": 
            grade = 1.0;
        break;
        case "F": 
            grade = 0.0;
            break;
        }
        return grade; //you return here so any code after this is never executed
    var numOfRequisites = 5;
    var gpa1 = numGrade(document.getElementById("Foundation").value);
    var gpa2 = numGrade(document.getElementById("Database").value);
    var gpa3 = numGrade(document.getElementById("Elect").value);
    var gpa4 = numGrade(document.getElementById("Commerce").value);
    var gpa5 = numGrade(document.getElementById("HealthInfo").value);
    var gpaTotal = (gpa1 + gpa2 + gpa3 + gpa4 + gpa5)/numOfRequisites ;
    if (gpaTotal >= 3.5)
        return acceptanceMessage;
    else 
        return consolationMessage;
    //document.getElementById("result").innerHTML=message;
}

    我想你想要：

    function numGrade(gpa){
   switch (gpa) {
      case "A": gpa = 4.0;
      break;
      case "B": gpa = 3.0;
      break;
      case "C": gpa = 2.0;
      break;
      case "D": gpa = 1.0;
      break;
      case "F": gpa = 0.0;
      break;
    }
    return gpa;
}

function calculateGradeAndGenMessage(){
    var numOfRequisites = 5;
    var gpa1 = numGrade(document.getElementById("Foundation").value);
    var gpa2 = numGrade(document.getElementById("Database").value);
    var gpa3 = numGrade(document.getElementById("Elect").value);
    var gpa4 = numGrade(document.getElementById("Commerce").value);
    var gpa5 = numGrade(document.getElementById("HealthInfo").value);
    var gpaTotal = (gpa1 + gpa2 + gpa3 + gpa4 + gpa5)/numOfRequisites ;
    if (gpaTotal >= 3.5)
        return acceptanceMessage;
    else 
        return consolationMessage;
}

document.getElementById("result").innerHTML=calculateGradeAndGenMessage();

答案 1 :(得分：0)

如评论中所述，您从未定义gpa。但是，我注意到你想要清理一下你的代码...我建议将它分解为两个函数：

样本： http://jsfiddle.net/dirtyd77/Q86gt/4/

JAVASCRIPT：

//Calculate average GPA of 5 classes. 
//If avereage GPA >= 3.5, show acceptance message.
//Else thank for applying. 
var consolationMessage = "<p>Thank you for your interest in this program. Unfortunately at this time, " +
    "we are unable to continue with your application due to our strict GPA standards. Please try again " +
    "at a later time.";

var acceptanceMessage = "Congratulations! Based on your GPA, we will move forward with your application " +
    "for this prestigious internship program."

    //get the gpa
    function getGPA() {
        var gpaTotal = null,
            message = null,
            classes = ['Foundation', 'Database', 'Elect', 'Commerce', 'HealthInfo'];

        //iterate over classes
        for (var i = 0; i < classes.length; i++) {
            var gpa = calculateGPA(document.getElementById(classes[i]).value);
            gpaTotal += gpa;
        }
        //gpaTotal divided by number of classes
        gpaTotal /= classes.length;

        //if not all values are filled out, alert and return
        if (isNaN(gpaTotal)) {
            alert('Please fill out all answers!');
            return;
        }

        if (gpaTotal >= 3.5) message = acceptanceMessage;
        else message = consolationMessage;

        document.getElementById("result").innerHTML = message;
    }

    function calculateGPA(gpa) {
        switch (gpa) {
            case "A":
                gpa = 4.0;
                break;
            case "B":
                gpa = 3.0;
                break;
            case "C":
                gpa = 2.0;
                break;
            case "D":
                gpa = 1.0;
                break;
            case "F":
                gpa = 0.0;
                break;
        }
        return gpa;
    }

HTML：

<h4>Thank you for your interest in our summer internship program. Please enter your GPA for the following courses. </h4>

<p>IT 3503 Foundation of HIT:</p>
<select id="Foundation">
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
</select>
<p>IT 4153 Advanced Database:</p>
<select id="Database">
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
</select>
<p>IT 4513 Elect Health Rec Sys & Ap:</p>
<select id="Elect">
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
</select>
<p>IT 4123 Electronic Commerce:</p>
<select id="Commerce">
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
</select>
<p>IT 4533 Health Info Sec & Priv:</p>
<select id="HealthInfo">
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
</select>
<input type="button" value="Submit" onclick="getGPA()" />
<p id="result"></p>

希望这有帮助，如果您有任何问题，请与我联系。

答案 2 :(得分：-1)

我最初错过了此退货声明，但在return gpa声明之后我switch。

这会导致您的功能已经returned已经结束。

然后在return gpa之后，if块中还有另外两个不必要的返回语句。

您应该分开计算GPA和消息生成。

function calculateGPA(letterGrade) {
    var gpa;
    switch (letterGrade) {
        case 'A':
            gpa = 4.0;
            break;
        case 'B':
            gpa = 3.0;
            break;
        case 'C':
            gpa = 2.0;
            break;
        case 'D':
            gpa = 1.0;
            break;
        case 'F':
            gpa = 0.0;
            break;
    }

    return gpa;
}

function averageGPA() {
    var gpas = [],
        sum = 0,
        numberGPA;

    gpas.push(calculateGPA(document.getElementById("Foundation").value));
    gpas.push(calculateGPA(document.getElementById("Database").value));
    gpas.push(calculateGPA(document.getElementById("Elect").value));
    gpas.push(calculateGPA(document.getElementById("Commerce").value));
    gpas.push(calculateGPA(document.getElementById("HealthInfo").value));

    for (var i = gpas.length - 1; i >= 0; i--) {
        sum += gpas[i]
    };

    return sum / gpas.length;
}

function passMessage(gpa) {
    var result = document.getElementById('result'),
        message;

    if (gpa >= 3.5) {
        message = "Congratulations! Based on your GPA, we will move forward with your application " +
            "for this prestigious internship program.";
    } else if (gpa < 3.5) {
        message = "Thank you for your interest in this program. Unfortunately at this time, " +
            "we are unable to continue with your application due to our strict GPA standards. Please try again " +
            "at a later time";
    }

    result.innerHTML = message;
}

function checkGPAResults() {
    passMessage(averageGPA());   
}

和fiddle

相关问题
最新问题