如何使用JavaScript循环使用？

-2

我需要使用javascript和HTML构建一个程序，使学生能够输入学期的科目代码，科目名称，学分和期望分数。下面的代码可以运行，但有一些需要在JavaScript部分完成。我想用for循环缩短脚本代码。如何使用JavaScript循环使用？

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

<script src="gpa.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="SCS987"></td> 
<td><input type="text" name="subject" value="Object-Oriented Programming"></td> 
<td><input type="text" id="credit" value="4"></td> 
<td><input type="text" id="marks" oninput="getMarks()"></td> 
<td id = "grade" value=""></td> 
<td id = "points" value=""></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades('myTable')" /></td> 
</tr> 

<tr> 
<td><input type="text" name="code" value="SCS119"></td> 
<td><input type="text" name="subject" value="Software Engineering"></td> 
<td><input type="text" id="credit1" value="3"></td> 
<td><input type="text" id="marks1" oninput="getMarks1()"></td> 
<td id = "grade1" value=""></td> 
<td id = "points1" value=""></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades1('myTable')" /></td> 
</tr> 

<tr> 
<td><input type="text" name="code" value="SCS902"></td> 
<td><input type="text" name="subject" value="Operating System"></td> 
<td><input type="text" id="credit2" value="3"></td> 
<td><input type="text" id="marks2" oninput="getMarks2()"></td> 
<td id = "grade2" value=""></td> 
<td id = "points2" value=""></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades2('myTable')" /></td> 
</tr> 

<tr> 
<td><input type="text" name="code" value="SCS897"></td> 
<td><input type="text" name="subject" value="Web Programming"></td> 
<td><input type="text" id="credit3" value="3"></td> 
<td><input type="text" id="marks3" oninput="getMarks3()"></td> 
<td id = "grade3" value=""></td> 
<td id = "points3" value=""></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades3('myTable')" /></td> 
</tr> 

<tr> 
<td><input type="text" name="code" value="ENG213"></td> 
<td><input type="text" name="subject" value="Advanced Academic English Skills"></td> 
<td><input type="text" id="credit4" value="2"></td> 
<td><input type="text" id="marks4" oninput="getMarks4()"></td> 
<td id = "grade4" value=""></td> 
<td id = "points4" value=""></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades4('myTable')" /></td> 
</tr> 

<tr> 
<td><input type="text" name="code" value="BIO899"></td> 
<td><input type="text" name="subject" value="Structure and Functions of Proteins"></td> 
<td><input type="text" id="credit5" value="3"></td> 
<td><input type="text" id="marks5" oninput="getMarks5()"></td> 
<td id = "grade5" value=""></td> 
<td id = "points5" value=""></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades5('myTable')" /></td> 
</tr> 
</table> 
</form> 

<div id="outputDive" style="height:50px; width:100%";"></div> 

<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>

这是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 x; 
function getMarks() 
{ 
    x = document.getElementById("marks").value; 
} 

function displayGrades(myTable) 
{ 
    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; 
} 

var x; 
function getMarks1() 
{ 
    x = document.getElementById("marks1").value; 
} 

function displayGrades1(myTable) 
{ 
    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("grade1").innerHTML = grade; 
    document.getElementById("points1").innerHTML = gpaPoint; 
} 

var x; 
function getMarks2() 
{ 
    x = document.getElementById("marks2").value; 
} 

function displayGrades2(myTable) 
{ 
    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("grade2").innerHTML = grade; 
    document.getElementById("points2").innerHTML = gpaPoint; 
} 

var x; 
function getMarks3() 
{ 
    x = document.getElementById("marks3").value; 
} 

function displayGrades3(myTable) 
{ 
    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("grade3").innerHTML = grade; 
    document.getElementById("points3").innerHTML = gpaPoint; 
} 

var x; 
function getMarks4() 
{ 
    x = document.getElementById("marks4").value; 
} 

function displayGrades4(myTable) 
{ 
    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("grade4").innerHTML = grade; 
    document.getElementById("points4").innerHTML = gpaPoint; 
} 

var x; 
function getMarks5() 
{ 
    x = document.getElementById("marks5").value; 
} 

function displayGrades5(myTable) 
{ 
    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("grade5").innerHTML = grade; 
    document.getElementById("points5").innerHTML = gpaPoint; 
} 

function gpacalc() 
{ 
    var a = parseFloat(document.getElementById("points").value); 
    var b = parseFloat(document.getElementById("points1").value); 
    var c = parseFloat(document.getElementById("points2").value); 
    var d = parseFloat(document.getElementById("points3").value); 
    var e = parseFloat(document.getElementById("points4").value); 
    var f = parseFloat(document.getElementById("points5").value); 
    var totalPoint = a+b+c+d+e+f; 

    var cr1 = parseFloat(document.getElementById("credit").value); 
    var cr2 = parseFloat(document.getElementById("credit1").value); 
    var cr3 = parseFloat(document.getElementById("credit2").value); 
    var cr4 = parseFloat(document.getElementById("credit3").value); 
    var cr5 = parseFloat(document.getElementById("credit4").value); 
    var cr6 = parseFloat(document.getElementById("credit5").value); 
    var totalCr = cr1+cr2+cr3+cr4+cr5+cr6; 

    var display = document.getElementById('outputDiv'); 
    display.innerHTML="Your GPA is: "+totalPoint/totalCr; 
}

来源

2017-04-23 programmer211216

你不知道在编程循环概念？ –

@DivyeshGauswami我不熟悉JavaScript中的循环概念。 +我的情况要求我使用for循环来访问表中的每个元素。顺便说一句，我还是个初学者。 – programmer211216

好的没问题。只需通过w3cschool/javascrip并学习它。这是相当简单，容易和相同的概念，在其他语言中使用。 :)我的建议给你描述你的阙。简而言之，其他人可以知道什么是probelm是 –

使用动态变量名：

这可以在一个javascript来实现用的eval（..）：

的eval（ ''）计算动态创建的字符串：

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

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


    for(var i=1; i < 7; ++i) 
    { 

     var varcell = "cell" + i; 
     var varelement = "element" +i; 

     var cell == eval(varcell); 
     var element == eval(varelement); 

     row.insertCell(i-1); 
     var element1 = document.createElement("input"); 
     cell1.appendChild(element1); 
    } 
}

来源

2017-04-23 10:53:31 Gio

谢谢。但我需要使用for循环来确定学生根据他们在表单中输入的标记获得的成绩。 – programmer211216

通过给出百分比值，您可以使用单个函数获取成绩和分数。

function getGradeAndPoint(p) { 
    if (x < 40) { 
     return { grade: "F", gpaPoint: 0.00 }; 
    } 
    if (x < 45) { 
     return { grade: "D", gpaPoint: 1.00 }; 
    } 
    if (x < 50) { 
     return { grade: "C-", gpaPoint: 1.67 }; 
    } 
    if (x < 55) { 
     return { grade: "C", gpaPoint: 2.00 }; 
    } 
    if (x < 60) { 
     return { grade: "C+", gpaPoint: 2.33 }; 
    } 
    if (x < 65) { 
     return { grade: "B-", gpaPoint: 2.67 }; 
    } 
    if (x < 70) { 
     return { grade: "B", gpaPoint: 3.00 }; 
    } 
    if (x < 75) { 
     return { grade: "B+", gpaPoint: 3.33 }; 
    } 
    if (x < 80) { 
     return { grade: "A-", gpaPoint: 3.67 }; 
    } 
    if (x < 90) { 
     return { grade: "A", gpaPoint: 4.00 }; 
    } 
    return { grade: "A+", gpaPoint: 4.00 }; 
}

随着

var object = getGradeAndPoint(82);

你得到的结果作为对象，像

{ 
    grade: "A", 
    gpaPoint: 4.00 
}

和访问值是可能的钥匙，就像

object.grade

来源

2017-04-23 11:07:15

p是什么？ – programmer211216

我假设，这是百分比值。 –

你需要弄清楚所有常见的工作你正在执行，然后找出一些常见变量来区分它们。例如，您可以使用ID来通过等级的方法。

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

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

找出像displayGrades其他选项都是相同的，等

回答你的问题，即如何使用循环。它只是样品给你的想法。

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

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

 
    for (var i = 0; i < 6; i++) { 
 
    var cell = row.insertCell(i); 
 
    if (i < 4) { 
 
     // As you want to create a input field just before 
 
     var element = document.createElement("input"); 
 
     // you need ID attributes to pass on for getMarks 
 
     element.id = Math.floor(Math.random() * 11) + "Id"; 
 
     cell.appendChild(element); 
 
    } 
 
    } 
 
}

你只需要通过你的代码，并突出了共同行动，这将优化你的代码。另外，请通过循环概念轻松理解。

来源

2017-04-23 11:28:11 thekaushal

我有2个id为displayGrades（），它们是id =“grade”和id =“points”。我如何将它们包含在一个方法中？ – programmer211216

我试图使用id来传递年级，但它只适用于第一行。这就是我的意思是实现一个for循环 – programmer211216

它不应该。你有没有改变相应的HTML？'。您将始终获得该特定行的ID。您需要首先检查您正在编辑的行，然后根据rowindex获取需要更新的列，以防出现DisplayGrades为2的id， – thekaushal

如何使用JavaScript循环使用？

回答

相关问题