我正在尝试使此代码运行。在函数 GradeCal() 中，即使条件不成立，也只执行 if 语句。由于某种原因， else 没有被执行。不知道我做错了什么。PS我是JS的初学者。这是我的代码<html><head> <title>It430 </title></head><body> <center> <h2>Grade Book Calculator</h2> <h4> Welcome to Grade Book Calculator </h4> <form id="my form"> <table> <tr> <td>Student ID:</td> <td> <input id="studentid" value="bc180200783" oninvalid="alert(Please Enter Student ID)" type="text" place holder="Enter your VU ID" required="required" /></td> </tr> <tr> <td>Name:</td> <td> <input id="nameid" value="Hina" oninvalid="alert(Please Enter Name)" type="text" required="required" /></td> </tr> <tr> <td>Father Name:</td> <td> <input id="fathernameid" value="Zafar" oninvalid="alert(Please Enter Father Name)" type="text" required="required" /></td> </tr> <tr> <td>CNIC:</td> <td> <input id="cnicid" pattern="^[0-9+][5]-[0-9+][7]-[0-9][1]$" value="33100-1100321-5" oninvalid="alert(Please Enter CNIC)" required="required" /></td> </tr> <tr> <td>English:</td> <td> <input id="englishid" oninvalid="alert(Please Enter English Marks)" name="english" required="required" /></td> </tr> <tr> <td>Math:</td> <td> <input id="mathid" oninvalid="alert(Please Enter Math Marks)" name="math" required="required" /></td> </tr> <tr> <td>Computer:</td> <td> <input id="computerid" oninvalid="alert(Please Enter Computer Marks)" name="computer" required="required" /></td> </tr> <tr> <td>Average Marks:</td> <td> <output type="number" id="markid"> </output> </td> </tr> <tr> <td> <button type="button" onClick="GradeCal()"> Grade Book </button> <button type="reset"> Reset</button></td> </tr> </table> </form> </center>
3 回答
ABOUTYOU
TA贡献1812条经验 获得超5个赞
您没有访问元素的值。您应该更改代码以包括从 HTML 元素中提取值。像这样：
var field1 = document.getElementById("englishid").value;
var field2 = document.getElementById("mathid").value;
var field3 = document.getElementById("computerid").value;
将.value提取 HTML 标记中的值。
您还可以改进 if 语句。以下可能不会像您认为的那样做：
if (field1 || field2 || field3 === NULL)
这里实际发生了什么，它说的是： Is field1 set (not NULL, undefined, 0, NaN, "" or false) OR is field2 set (not NULL, undefined, 0, NaN, "" or false) OR is field3 NULL.
如果您想检查其中任何一个是否为空，您需要执行以下操作：
if (field1 === NULL || field2 === NULL || field3 === NULL)
甚至更好，更容易：
if (!field1 || !field2 || !field3)
完整功能：
function GradeCal() {
var field1 = document.getElementById("englishid").value;
var field2 = document.getElementById("mathid").value;
var field3 = document.getElementById("computerid").value;
var result;
if (!field1 || !field2 || !field3) {
alert("Please enter number");
} else {
result = (field1 + field2 + field3) / 3;
document.getElementById("markid").innerHTML = +result;
}
}
守候你守候我
TA贡献1802条经验 获得超10个赞
您的字段变量是您需要获取字段值以检查元素不能为空的元素
var field1 = document.getElementById("englishid").value;
var field2 = document.getElementById("mathid").value;
var field3 = document.getElementById("computerid").value;
慕桂英3389331
TA贡献2036条经验 获得超8个赞
GradeCal您可以稍微调整该函数并使其更具可扩展性，只需使用要处理的字段名称的数组和一些基本的数组方法即可。
function GradeCal(){
let result=[];
let fields=[ 'english', 'math', 'computer' ];
let out=document.getElementById('markid');
fields.forEach( ( id, i )=>{
let field=document.querySelector( 'input[name="'+id+'"]' );
if( field && !isNaN( field.value ) && field.value!='' )result.push( parseFloat( field.value ) );
else alert( 'Please enter a number for '+id )
});
if( result.length === fields.length ) {
out.innerHTML = result.reduce(( a,v )=>{ return a + v } ) / fields.length;
} else {
out.innerHTML='Error';
}
}
function GradeCal(){
let result=[];
let fields=[ 'english', 'math', 'computer' ];
let out=document.getElementById('markid');
fields.forEach( ( id, i )=>{
let field=document.querySelector( 'input[name="'+id+'"]' );
if( field && !isNaN( field.value ) && field.value!='' )result.push( parseFloat( field.value ) );
else alert( 'Please enter a number for '+id )
});
if( result.length === fields.length ) {
out.innerHTML = result.reduce(( a,v )=>{ return a + v } ) / fields.length;
} else {
out.innerHTML='Error';
}
}
<h2>Grade Book Calculator</h2>
<h4> Welcome to Grade Book Calculator </h4>
<form id="my form">
<table>
<tr>
<td>Student ID:</td>
<td> <input id="studentid" value="bc180200783" oninvalid="alert(Please Enter Student ID)" type="text" place holder="Enter your VU ID" required="required" /></td>
</tr>
<tr>
<td>Name:</td>
<td> <input id="nameid" value="Hina" oninvalid="alert(Please Enter Name)" type="text" required="required" /></td>
</tr>
<tr>
<td>Father Name:</td>
<td> <input id="fathernameid" value="Zafar" oninvalid="alert(Please Enter Father Name)" type="text" required="required" /></td>
</tr>
<tr>
<td>CNIC:</td>
<td> <input id="cnicid" pattern="^[0-9+][5]-[0-9+][7]-[0-9][1]$" value="33100-1100321-5" oninvalid="alert(Please Enter CNIC)" required="required" /></td>
</tr>
<tr>
<td>English:</td>
<td> <input id="englishid" oninvalid="alert(Please Enter English Marks)" name="english" required="required" /></td>
</tr>
<tr>
<td>Math:</td>
<td> <input id="mathid" oninvalid="alert(Please Enter Math Marks)" name="math" required="required" /></td>
</tr>
<tr>
<td>Computer:</td>
<td> <input id="computerid" oninvalid="alert(Please Enter Computer Marks)" name="computer" required="required" /></td>
</tr>
<tr>
<td>Average Marks:</td>
<td> <output type="number" id="markid"> </output>
</td>
</tr>
<tr>
<td> <button type="button" onClick="GradeCal()"> Grade Book </button>
<button type="reset"> Reset</button></td>
</tr>
</table>
</form>
添加回答
举报
0/150
提交
取消