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>
当我单击“计算成本”时,表格保持空白。
答案 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>