JavaScript:if else声明多个条件

时间:2019-07-24 19:30:58

标签: javascript

JavaScript的新手,正在尝试创建一个学费计算器。我需要知道居住权,如果他们要上校园课和学分,那么就必须计算学费。我无法使if else语句起作用。该代码仅针对校园课程显示,但一旦成功,我将添加在线课程等。谢谢您的帮助!

如果我在每个类类型之前询问居住问题,但我只想问一次居住问题,然后将学费分配给var onctut2,则我可以使用此计算器。我还希望学生能够输入onchours1的小数,但我只能得到整数。我尝试了各种if else语句。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Tuition Calculator</title>
    <script type="text/javascript">// <![CDATA[
    function formHandler(form) {
    	var residency = eval(form.residency.value);
        var onctut1 = eval(form.onctut1.value);
        var onchours1 = eval(form.onchours1.value);
    	var onctut2 = 0;
        var t1 = onctut2 * onchours1;
        var totalhours = onchours1;
        var oncfee1 = 0;
        var techfee1 = 0;
        var strecfee = 0;
            //Calculate on campus tut
            if (residency == "yes") && (onctut1 == "yes") {
              onctut2 = 252.00;
            } else if (residency == "no") && (onctut1 == "yes") {
              onctut2 = 554.00;
            } else {
              onctut2 = 0;
            }
            //Calculate on campus fees
            if (onchours1 == "1") {
              oncfee1 = 75.25;
            } else if (onchours1 == "2") {
              oncfee1 = 87.5;
            } else if (onchours1 == "3") {
              oncfee1 = 99.75;
            } else if (onchours1 == "4") {
              oncfee1 = 169.5;
            } else if (onchours1 == "5") {
              oncfee1 = 181.75;
            } else if (onchours1 == "6") {
              oncfee1 = 194.0;
            } else if (onchours1 == "7") {
              oncfee1 = 433.25;
            } else if (onchours1 == "8") {
              oncfee1 = 445.5;
            } else if (onchours1 == "9") {
              oncfee1 = 457.75;
            } else if (onchours1 == "10") {
              oncfee1 = 470.0;
            } else if (onchours1 == "11") {
              oncfee1 = 482.25;
            } else if (onchours1 == "12") {
              oncfee1 = 494.5;
            } else if (onchours1 == "13") {
              oncfee1 = 506.75;
            } else if (onchours1 == "14") {
              oncfee1 = 519.0;
            } else if (onchours1 == "15") {
              oncfee1 = 531.25;
            } else if (onchours1 == "16") {
              oncfee1 = 543.5;
            } else {
              oncfee1 = 0;
            }
    	//Calculate on tech fee
            if (totalhours == "1") {
              techfee1 = 11.;
            } else if (totalhours == "2") {
              techfee1 = 22.;
            } else if (totalhours == "3") {
              techfee1 = 33.;
            } else if (totalhours == "4") {
              techfee1 = 44.;
            } else if (totalhours == "5") {
              techfee1 = 55.;
            } else if (totalhours == "6") {
              techfee1 = 66.;
            } else if (totalhours == "7") {
              techfee1 = 77.;
            } else if (totalhours == "8") {
              techfee1 = 88.;
            } else if (totalhours == "9") {
              techfee1 = 99.;
            } else if (totalhours == "10") {
              techfee1 = 110.;
            } else if (totalhours == "11") {
              techfee1 = 121.;
            } else if (totalhours == "12") {
              techfee1 = 132.;
            } else if (totalhours == "13") {
              techfee1 = 143.;
            } else if (totalhours == "14") {
              techfee1 = 154.;
            } else if (totalhours == "15") {
              techfee1 = 165.;
            } else if (totalhours == "16") {
              techfee1 = 165.;
            } else {
              techfee1 = 0;
            }
            //Calculate on student rec fee
            if (totalhours > "0") {
              strecfee = 4;
            }
        var fees1 = oncfee1;
    	var fees = fees1 + techfee1 + strecfee;
        var cost = t1 + fees;
        form.t1.value = "$" + t1.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
        form.fees.value = "$" + fees.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
        form.costresult.value = "$" + cost.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    	form.totalhours.value = "" + totalhours;
    }
    // ]]></script>
    </head>
    <body>
    <form method="post" name="testform">
      <div>
        <table
              id="AutoNumber1"
              summary="calculate the cost per semester for 
        graduate students"
            >
          <tbody>
            <tr>
              <td colspan="2"><label for="residency">Are you a Resident? </label>
                <select id="residency" name="residency">
                  <option selected="selected" value="0"> </option>
                  <option value="yes">Yes</option>
                  <option value="no">No</option>
                </select></td>
            </tr>
            <tr>
              <td colspan="2"><label for="onctut1">Will you take an On campus class? </label>
                <select id="onctut1" name="onctut1">
                  <option selected="selected" value="0"> </option>
                  <option value="yes">Yes</option>
                  <option value="no">No</option>
                </select></td>
            </tr>
            <tr>
              <td colspan="2"><label for="onchours1">Select On campus class Credit Hours </label>
                <select id="onchours1" name="onchours1">
                  <option selected="selected" value="0">0</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                </select></td>
            </tr>
            <tr>
              <td colspan="2"><br></td>
            </tr>
            <tr>
              <td colspan="2"><button
                        name="CostResult"
                        onclick="javascript:formHandler(this.form)"
                        type="button"
                      > Calculate Cost </button></td>
            </tr>
            <tr>
              <td colspan="2"><br></td>
            </tr>
            <tr>
              <td><label for="t1">Tuition On Campus Class(es) </label></td>
              <td><input id="t1" name="t1" size="10" type="text" /></td>
            </tr>
            <tr>
              <td><label for="fees">Fees </label></td>
              <td><input id="fees" name="fees" size="10" type="text" /></td>
            </tr>
            <tr>
              <td><label for="costresult">Total Estimated Tuition/Fees Semester Cost </label></td>
              <td><input
                      id="costresult"
                      name="costresult"
                      size="10"
                      type="text"
                    /></td>
            </tr>
            <tr>
              <td><label for="totalhours">Total Credit Hours </label></td>
              <td><input id="totalhours" name="totalhours" size="10" type="text" /></td>
            </tr>
          </tbody>
        </table>
      </div>
    </form>
    </body>
    </html>

当我单击“计算成本”时,表格保持空白。

4 个答案:

答案 0 :(得分:2)

if (residency == "yes") && (onctut1 == "yes") {
    onctut2 = 252.00;
} else if (residency == "no") && (onctut1 == "yes") {
    onctut2 = 554.00;
} else {
    onctut2 = 0;
}

我的猜测是,这样做的问题是您需要在整个条件(而不是每个单独的条件)上加上括号。

if (residency == "yes" && onctut1 == "yes") {
    onctut2 = 252.00;
} else if (residency == "no" && onctut1 == "yes") {
    onctut2 = 554.00;
} else {
    onctut2 = 0;
}

看起来您可以简化代码,而不是对techfee1变量使用大量的if语句,您可以执行以下操作:

totalhours = +totalhours; // convert it to a number
techfee1 = totalhours * 11;
if (totalhours === 16) {
    techfee1 = 165;
}
if (totalhours > 16 || totalhours < 1) {
    techfee1 = 0;
}

答案 1 :(得分:1)

三种类型的问题在控制台中引发错误:
 1)if语句指定的条件必须用括号括起来(完整),例如,
 if (residency == "yes" && onctut1 == "yes")

if ( (residency == "yes") && (onctut1 == "yes") )

2)eval函数(通常应尽可能避免使用此函数)期望接收有效的JavaScript代码。删除eval调用可解决此问题。

3)>运算符需要数字,而不是字符串。在parseInt函数中包装比较即可解决此问题。

以下是实现这些更改的有效版本:

*-编辑-
我的原始答案仅进行了上述更改。
此修订版重做并简化了代码,并提供了更清晰的变量命名。
(我还没有完全测试过它,所以我不确定我的数学是否正确,但是更新它最多要做的就是更改一些数字。)
*--

function formHandler(form) {
  
  // Gets form inputs
  var residencyInput = form.residency.value,
      oncTutInput = form.onctut1.value,
      oncHoursInput = form.onchours1.value;
  
  // Converts each input (from String) to Boolean or Number (assumes valid input values)
  var residencyBoolean = (residencyInput == "Yes"),
      oncTutBoolean = (oncHoursInput == "Yes"),
      oncHoursNumber = parseInt(oncHoursInput);

  // Sets Hourly onc tut based on residency
  if(residencyBoolean){ oncTutHourly = 252.00; }
  else{ oncTutHourly = 554.00; }

  // Calculates onc fees (defaults to zero, won't change unless onHoursNumber is positive)
  let oncFee = 0;
  if(oncHoursNumber > 0 && oncHoursNumber < 4){
    oncFee = oncHoursNumber * 12.25 + 63;
  }
  else if(oncHoursNumber > 3 && oncHoursNumber < 7){
    oncfee = oncHoursNumber * 12.25 + 120.5;
  }
  else if(oncHoursNumber > 6 && oncHoursNumber < 17){
    oncfee = oncHoursNumber * 12.25 + 347.5;
  }

  // Calculates tech fee (defaults to zero, won't change unless onHoursNumber is positive)
  let techFee = 0;
  // If `oncHoursNumber` is above 15, techfee1 will be 165
  if(oncHoursNumber > 0){
    techfee = Math.min(oncHoursNumber * 11, 165);
  }

  //Calculates student rec fee
  let strecFee = 0;
  if(oncHoursNumber > "0"){ strecFee = 4; }
  
  // Calculates final values
  let oncTutTotal = oncHoursNumber * oncTutHourly; 
  let feesTotal = oncFee + techFee + strecFee;
  let costTotal =  oncTutTotal + feesTotal;

  form.t1.value = "$" + oncTutTotal.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
  form.fees.value = "$" + feesTotal.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
  form.costresult.value = "$" + costTotal.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
  form.totalhours.value = "" + oncHoursNumber;
}
<form method="post" name="testform">
  <div>
    <table
          id="AutoNumber1"
          summary="calculate the cost per semester for 
    graduate students"
        >
      <tbody>
        <tr>
          <td colspan="2"><label for="residency">Are you a Resident? </label>
            <select id="residency" name="residency">
              <option selected="selected" value="0"> </option>
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select></td>
        </tr>
        <tr>
          <td colspan="2"><label for="onctut1">Will you take an On campus class? </label>
            <select id="onctut1" name="onctut1">
              <option selected="selected" value="0"> </option>
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select></td>
        </tr>
        <tr>
          <td colspan="2"><label for="onchours1">Select On campus class Credit Hours </label>
            <select id="onchours1" name="onchours1">
              <option selected="selected" value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
            </select></td>
        </tr>
        <tr>
          <td colspan="2"><br></td>
        </tr>
        <tr>
          <td colspan="2"><button
                    name="CostResult"
                    onclick="javascript:formHandler(this.form)"
                    type="button"
                  > Calculate Cost </button></td>
        </tr>
        <tr>
          <td colspan="2"><br></td>
        </tr>
        <tr>
          <td><label for="t1">Tuition On Campus Class(es) </label></td>
          <td><input id="t1" name="t1" size="10" type="text" /></td>
        </tr>
        <tr>
          <td><label for="fees">Fees </label></td>
          <td><input id="fees" name="fees" size="10" type="text" /></td>
        </tr>
        <tr>
          <td><label for="costresult">Total Estimated Tuition/Fees Semester Cost </label></td>
          <td><input
                  id="costresult"
                  name="costresult"
                  size="10"
                  type="text"
                /></td>
        </tr>
        <tr>
          <td><label for="totalhours">Total Credit Hours </label></td>
          <td><input id="totalhours" name="totalhours" size="10" type="text" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

答案 2 :(得分:0)

老实说,我会改用switch语句。比在if / else中具有多个条件更有意义。 https://www.w3schools.com/js/js_switch.asp

//Calculate on campus tut
        if (residency == 0 && onctut1 == 0) {
          onctut2 = 252.00;
        } else if (residency == 1 && onctut1 == 0) {
          onctut2 = 554.00;
        } else {
          onctut2 = 0;
        }

答案 3 :(得分:0)

我想我已经解决了您的T1问题,并且我认为它正在满足您的需求!

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Tuition Calculator</title>
    <script type="text/javascript">// <![CDATA[
    function formHandler(form) {
    	var residency = eval(form.residency.value);
        var onctut1 = eval(form.onctut1.value);
        var onchours1 = eval(form.onchours1.value);
    	  var onctut2 = 0;
        var totalhours = onchours1;
        var oncfee1 = 0;
        var techfee1 = 0;
        var strecfee = 0;
            //Calculate on campus tut
            if (residency == 0 && onctut1 == 0) {
              onctut2 = 252.00;
            } else if (residency == 1 && onctut1 == 0) {
              onctut2 = 554.00;
            } else {
              onctut2 = 0;
            }
            //Calculate on campus fees
            if (onchours1 == "1") {
              oncfee1 = 75.25;
            } else if (onchours1 == "2") {
              oncfee1 = 87.5;
            } else if (onchours1 == "3") {
              oncfee1 = 99.75;
            } else if (onchours1 == "4") {
              oncfee1 = 169.5;
            } else if (onchours1 == "5") {
              oncfee1 = 181.75;
            } else if (onchours1 == "6") {
              oncfee1 = 194.0;
            } else if (onchours1 == "7") {
              oncfee1 = 433.25;
            } else if (onchours1 == "8") {
              oncfee1 = 445.5;
            } else if (onchours1 == "9") {
              oncfee1 = 457.75;
            } else if (onchours1 == "10") {
              oncfee1 = 470.0;
            } else if (onchours1 == "11") {
              oncfee1 = 482.25;
            } else if (onchours1 == "12") {
              oncfee1 = 494.5;
            } else if (onchours1 == "13") {
              oncfee1 = 506.75;
            } else if (onchours1 == "14") {
              oncfee1 = 519.0;
            } else if (onchours1 == "15") {
              oncfee1 = 531.25;
            } else if (onchours1 == "16") {
              oncfee1 = 543.5;
            } else {
              oncfee1 = 0;
            }
    	//Calculate on tech fee
            if (totalhours == "1") {
              techfee1 = 11.;
            } else if (totalhours == "2") {
              techfee1 = 22.;
            } else if (totalhours == "3") {
              techfee1 = 33.;
            } else if (totalhours == "4") {
              techfee1 = 44.;
            } else if (totalhours == "5") {
              techfee1 = 55.;
            } else if (totalhours == "6") {
              techfee1 = 66.;
            } else if (totalhours == "7") {
              techfee1 = 77.;
            } else if (totalhours == "8") {
              techfee1 = 88.;
            } else if (totalhours == "9") {
              techfee1 = 99.;
            } else if (totalhours == "10") {
              techfee1 = 110.;
            } else if (totalhours == "11") {
              techfee1 = 121.;
            } else if (totalhours == "12") {
              techfee1 = 132.;
            } else if (totalhours == "13") {
              techfee1 = 143.;
            } else if (totalhours == "14") {
              techfee1 = 154.;
            } else if (totalhours == "15") {
              techfee1 = 165.;
            } else if (totalhours == "16") {
              techfee1 = 165.;
            } else {
              techfee1 = 0;
            }
            //Calculate on student rec fee
            if (totalhours > "0") {
              strecfee = 4;
            }
        var fees1 = oncfee1;
    	  var fees = fees1 + techfee1 + strecfee;
        var t1 = onctut2 * onchours1;
        var cost = t1 + fees;
        form.t1.value = "$" + t1.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
        form.fees.value = "$" + fees.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
        form.costresult.value = "$" + cost.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    	form.totalhours.value = "" + totalhours;
    }
    // ]]></script>
    </head>
    <body>
    <form method="post" name="testform">
      <div>
        <table
              id="AutoNumber1"
              summary="calculate the cost per semester for 
        graduate students"
            >
          <tbody>
            <tr>
              <td colspan="2"><label for="residency">Are you a Resident? </label>
                <select id="residency" name="residency">
                  <option selected="selected" value="0"> </option>
                  <option value="0">Yes</option>
                  <option value="1">No</option>
                </select></td>
            </tr>
            <tr>
              <td colspan="2"><label for="onctut1">Will you take an On campus class? </label>
                <select id="onctut1" name="onctut1">
                  <option selected="selected" value="0"> </option>
                  <option value="0">Yes</option>
                  <option value="1">No</option>
                </select></td>
            </tr>
            <tr>
              <td colspan="2"><label for="onchours1">Select On campus class Credit Hours </label>
                <select id="onchours1" name="onchours1">
                  <option selected="selected" value="0">0</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                </select></td>
            </tr>
            <tr>
              <td colspan="2"><br></td>
            </tr>
            <tr>
              <td colspan="2"><button
                        name="CostResult"
                        onclick="javascript:formHandler(this.form)"
                        type="button"
                      > Calculate Cost </button></td>
            </tr>
            <tr>
              <td colspan="2"><br></td>
            </tr>
            <tr>
              <td><label for="t1">Tuition On Campus Class(es) </label></td>
              <td><input id="t1" name="t1" size="10" type="text" /></td>
            </tr>
            <tr>
              <td><label for="fees">Fees </label></td>
              <td><input id="fees" name="fees" size="10" type="text" /></td>
            </tr>
            <tr>
              <td><label for="costresult">Total Estimated Tuition/Fees Semester Cost </label></td>
              <td><input
                      id="costresult"
                      name="costresult"
                      size="10"
                      type="text"
                    /></td>
            </tr>
            <tr>
              <td><label for="totalhours">Total Credit Hours </label></td>
              <td><input id="totalhours" name="totalhours" size="10" type="text" /></td>
            </tr>
          </tbody>
        </table>
      </div>
    </form>
    </body>
    </html>