これまでの結果のスクリーンショット このコードには2つの問題があります。まず、「平均を計算する」ボタンをクリックして、疑問符を平均値に置き換えます。それは最初の学生のためだけに働く。 2人目または3人目の生徒は働きません。 id = "question"をクラスに変更しようとしましたが、それでも動作しません。次に、「良い結果の生徒を見つける」ボタンをクリックし、平均以上の生徒のために、行全体のデータを赤で強調表示します(背景色ではなくフォントの色)。私はこの3日間で作業しましたが、まだそれを働かせることはできません。誰もがここでテーブルのデータをjavascriptとjQueryに置き換えるにはどうすればいいですか?
var fullname = document.getElementById("name");
var classnumber = document.getElementById("classnumber");
var maths = document.getElementById("maths");
var physics = document.getElementById("physics");
var chemistry = document.getElementById("chemistry");
var notice1 = document.getElementById("notice1");
var notice2 = document.getElementById("notice2");
var notice3 = document.getElementById("notice3");
var notice4 = document.getElementById("notice4");
var notice5 = document.getElementById("notice5");
var student = [];
function submit() {
var isValid = true;
if (fullname.value === "") {
notice1.innerHTML = "Full name must be entered";
isValid = false;
} else {
notice1.innerHTML = "";
}
if (classnumber.value === "") {
notice2.innerHTML = "Class must be entered";
isValid = false;
} else {
notice2.innerHTML = "";
}
if (isNaN(parseInt(maths.value)) === true || maths.value === "" || parseFloat(maths.value) > 10 || parseFloat(maths.value) < 0) {
notice3.innerHTML = "Maths score must be entered and it has to be a number from 0 to 10";
isValid = false;
} else {
notice3.innerHTML = "";
}
if (isNaN(parseInt(physics.value)) === true || physics.value === "" || parseFloat(physics.value) > 10 || parseFloat(physics.value) < 0) {
notice4.innerHTML = "Physics score must be entered and it has to be a number from 0 to 10";
isValid = false;
} else {
notice4.innerHTML = "";
}
if (isNaN(parseInt(chemistry.value)) === true || chemistry.value === "" || parseFloat(chemistry.value) > 10 || parseFloat(chemistry.value) < 0) {
notice5.innerHTML = "Chemistry score must be entered and it has to be a number from 0 to 10";
isValid = false;
} else {
notice5.innerHTML = "";
}
if (isValid === true) {
addStudent(fullname.value, maths.value, physics.value, chemistry.value);
transfer();
}
return false;
}
function addStudent(fullname, maths, physics, chemistry) {
var newStudent = {
fullname: fullname,
maths: maths,
physics: physics,
chemistry: chemistry,
};
student.push(newStudent);
}
function round(num, decimals) {
var n = Math.pow(10, decimals);
return Math.round((n * num).toFixed(decimals))/n;
}
function transfer() {
var content = document.getElementById("tableData").innerHTML;
var i = student.length - 1;
content += "<tr>";
content += "<td>" + (i + 1) + " </td>";
content += "<td>" + student[i].fullname + " </td>";
content += "<td>" + student[i].maths + " </td>";
content += "<td>" + student[i].physics + " </td>";
content += "<td>" + student[i].chemistry + " </td>";
content += "<td id='question'>" + "?" + "</td>";
content += "</tr>";
document.getElementById("tableData").innerHTML = content;
this.studentmaths = student[i].maths;
this.studentphysics = student[i].physics;
this.studentchemistry = student[i].chemistry;
}
function average() {
var calculation = round((parseFloat(parseInt(studentmaths) + parseInt(studentphysics) + parseInt(studentchemistry))/3), 2);
document.getElementById("question").innerHTML = calculation;
}
$(document).ready(function() {
$(goodresult).click(function() {
if ($('question').val >= 8) {
content.css('color', 'red');
}
});
});
td {
padding: 5px;
}
input {
border: solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<table>
<tr>
<td style="width:150px;">Full name</td>
<td><input id="name"></td>
<td id="notice1"></td>
</tr>
<tr>
<td style="width:150px;">Class</td>
<td><input id="classnumber"></td>
<td id="notice2"></td>
</tr>
<tr>
<td style="width:150px;">Maths Score</td>
<td><input id="maths"></td>
<td id="notice3"></td>
</tr>
<tr>
<td style="width:150px;">Physics Score</td>
<td><input id="physics"></td>
<td id="notice4"></td>
</tr>
<tr>
<td style="width:150px;">Chemistry Score</td>
<td><input id="chemistry"></td>
<td id="notice5"></td>
</tr>
</tr>
<tr>
<td style="width:150px;"></td>
<td><button style="border:none; background-color:white;font-size: 15px;" onclick="submit();">Submit</button></td>
<td></td>
</tr>
</table>
<table id="tableData" border="1px" cellpadding="0" cellspacing="0">
<tr>
<th style="padding:5px 30px">Number</th>
<th style="padding:5px 70px">Full Name</th>
<th style="padding:5px 30px">Maths</th>
<th style="padding:5px 30px">Physics</th>
<th style="padding:5px 30px">Chemistry</th>
<th style="padding:5px 30px">Average</th>
</tr>
</table>
<br>
<button style="float:left;display:block;clear:both;border:none;background-color: white;padding:10px;position: absolute;left:600px" onclick="average();">Calculate the average</button>
<br>
<br>
<button style="float:left; display:block;clear: both;border:none;background-color: white;padding:10px;position: absolute;left:600px" id="goodresult">Find students with good result</button>
で行われます。あなたが投稿をヒットして生徒をテーブルに入れたときの平均を計算するほうが良いのではないでしょうか?それは非常に簡単で、問題を大きく解決します。それは「平均を計算する」が不要なボタンのように思える。あなたの正確なニーズはわかりませんが、これを使用した場合、最初はすべてのデータを必要とし、別のボタンを押して平均を得ることはしません。 –