您需要更改条件

Question

我正在尝试使此代码运行。在函数GradeCal（）中，即使条件不成立，也仅执行if语句。由于某种原因，else未执行。不知道我在做什么错。 P.S我是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>
  <script>
    function GradeCal() {
      var field1 = document.getElementById("englishid");
      var field2 = document.getElementById("mathid");
      var field3 = document.getElementById("computerid");
      var result;

      if (field1 || field2 || field3 === NULL) {
        alert("Please enter number");
      } else {
        result = (parseFloat(field1) + parseFloat(field2) + parseFloat(field3)) / 3;
        document.getElementById("markid").innerHTML = +result;
      }
    }
  </script>

</body>

</html>

Answer 1

您没有访问元素的值。您应该更改代码以包括从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;
      }
    }

Answer 2

您的字段变量是获取要检查的字段值所需的元素元素不能为空

 var field1 = document.getElementById("englishid").value;
  var field2 = document.getElementById("mathid").value;
  var field3 = document.getElementById("computerid").value;

Answer 3

您可以稍微调整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>

Answer 4

您可以执行以下代码。

function GradeCal() {
  var field1 = document.getElementById("englishid").value;
  var field2 = document.getElementById("mathid").value;
  var field3 = document.getElementById("computerid").value;
  var result;

  if (field1 === NULL || field2 === NULL || field3 === NULL) {
    alert("Please enter number");
  } else {
    result = (parseFloat(field1) + parseFloat(field2) + parseFloat(field3)) / 3;
    document.getElementById("markid").innerHTML = +result;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>


</body>

</html>

Answer 5

您需要更改条件

像这样if (field1 === NULL || field2 === NULL || field3 === NULL);

HTML：

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

</html>

那我比NumberseparFloat更喜欢Number

JAVASCRIPT：

function GradeCal() {
    var field1 = document.getElementById("englishid");
    var field2 = document.getElementById("mathid");
    var field3 = document.getElementById("computerid");
    var result;

    if (field1 || field2 || field3 === NULL) {
        alert("Please enter number");
    } else {
        result = (Number(field1) + Number(field2) + Number(field3)) / 3;
        document.getElementById("markid").innerHTML = +result;
    }
}

在Java脚本中的if else语句中，只有在执行时，即使它不是true

5 个答案:

您需要更改条件

HTML：

JAVASCRIPT：