如何使用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循環使用？

回答

相關問題