Question

我目前正在研究GPA计算器的大学项目，默认情况下，默认科目，科目代码和学分填写在表格中，并且可以编辑。学生只需填写每个科目的预期分数，然后只需单击提供的按钮即可查看每个科目的成绩和指针。下面的代码工作正常，因为我还没有完成很大一部分，但运行代码时肯定存在问题。问题是用于显示每个主题的成绩和指针的按钮仅适用于表格的第一行。这意味着它仅在表格的第一行更新主题的等级和指针。我已经为你提供了html文件和js文件来运行程序，让你更了解我想说的内容。

JS小提琴示例： https://jsfiddle.net/onyhL6mb/

.html文件：

<html>
<title> GPA Calculator </title>
<head>

<script src="test_asg3.js">
</script>
</head>

<body>
<form name="gpaCalc">
<table id="myTable" border="1"; width: "100%">
<tr>
    <th>Code
    <th>Subject
    <th>Credit
    <th>Expected Mark
    <th>Grades
    <th>GPA
    <th>
</tr>

<tr>
<td><input type="text" name="code" value="SCJ524"></td>
<td><input type="text" name="subject" value="Object-Oriented Programming"></td>
<td><input type="text" name="credit" value="4"></td>
<td><input type="text" id="marks" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>

<tr>
<td><input type="text" name="code" value="SCJ011"></td>
<td><input type="text" name="subject" value="Software Engineering"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks1" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>

<tr>
<td><input type="text" name="code" value="SCR234"></td>
<td><input type="text" name="subject" value="Operating System"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks2" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>

<tr>
<td><input type="text" name="code" value="SCV122"></td>
<td><input type="text" name="subject" value="Web Programming"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks3" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>

<tr>
<td><input type="text" name="code" value="ENG222"></td>
<td><input type="text" name="subject" value="Advanced Academic English Skills"></td>
<td><input type="text" name="credit" value="2"></td>
<td><input type="text" id="marks4" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>

<tr>
<td><input type="text" name="code" value="BIO683"></td>
<td><input type="text" name="subject" value="Structure and Functions of Proteins"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks5" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
</table>
</form>

<br><input type="button" value="Add Subject" onclick="addRow('myTable')" />
<!--<input type="button" value="Calculate GPA" onclick="gpacalc()" /> -->
<!---<br><input type="submit" value="Calculate GPA" onclick="xxxxxx('yyyy')" />--->
</body>
</html>

.js文件

function addRow(myTable)
{
    var table = document.getElementById("myTable");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    cell4.appendChild(element4);

    var cell5 = row.insertCell(4);
    var element5 = document.createElement("");
    cell5.appendChild(element5);

    var cell6 = row.insertCell(5);
    var element6 = document.createElement("");
    cell6.appendChild(element6);

    var cell7 = row.insertCell(6);
    var element7 = document.createElement("");
    cell7.appendChild(element7);
}

var x;

function getMarks(id)
{
    x = document.getElementById(id).value;
}

function displayGrades()
{
        var grade;
        var gpaPoint;

        if(x >= 90 && x<=100)
        {
            grade = "A+";
            gpaPoint = 4.00;
        }

        else if(x >=80 && x< 90)
        {
            grade = "A";
            gpaPoint = 4.00;
        }

        else if(x >=75 && x< 80)
        {
            grade = "A-";
            gpaPoint = 3.67;
        }

        else if(x >=70 && x< 75)
        {
            grade = "B+";
            gpaPoint = 3.33;
        }

        else if(x >=65 && x< 70)
        {
            grade = "B";
            gpaPoint = 3.00;
        }

        else if(x >=60 && x< 65)
        {
            grade = "B-";
            gpaPoint = 2.67;
        }

        else if(x >=55 && x< 60)
        {
            grade = "C+";
            gpaPoint = 2.33;
        }

        else if(x >=50 && x< 55)
        {
            grade = "C";
            gpaPoint = 2.00;
        }

        else if(x >=45 && x< 50)
        {
            grade = "C-";
            gpaPoint = 1.67;
        }

        else if(x >=40 && x< 45)
        {
            grade = "D";
            gpaPoint = 1.00;
        }

        else if(x < 40)
        {
            grade = "F";
            gpaPoint = 0.00;
        }

        document.getElementById("grade").innerHTML = grade;
        document.getElementById("points").innerHTML = gpaPoint;
    }

我在此处在我的其他帐户上发布了相同的问题，并使用其他用户建议的答案更新了代码。但是，我不允许在该帐户上发布另一个问题，因为我发布的问题已收到＆＃34;不良评论＆＃34;从其他用户，因此达到我的限制发布另一个问题。希望这次有人可以提出一个想法来帮助完成这个项目。

P / S：当我使用notepad ++时它完全正常，但它似乎不适用于js小提琴示例。

Answer 1

您不能拥有具有相同ID的HTMLElements 您的id="grade"和id="point"错了。您应该使用唯一ID生成它，例如行数或主题ID，例如id="grade_0"或id="grade_SCV122"，并将此变量传递给您的函数，例如。

编辑：

你可以这样做：点击此按钮更改您的按钮

displayGrades(this.parentElement.parentElement)

你的剧本就像这样开始

function displayGrades( line )
{
    var grade;
    var gpaPoint;
    if( line && line.children && line.children.length > 0 ){
        //Pure javascript
        grade = line.children[0].children[0].value;
        gpaPoint = line.children[3].children[0].value;
        //jQuery
        grade = $(line).find("input[name=code]").val();
        gpaPoint = $(line).find("input[name=marks]").val();//And add the name marks to your input marks
    }

更新

//replace the 2 getElementsById lines by that
line.children[4].innerHTML = grade;
line.children[5].innerHTML = gpaPoint;

如何访问行中的每个元素？

1 个答案: