Javascript -太多的语句



我试图建立一个估计计算器,但函数说太多的语句。我试图将变量移动到一个公共类来保存值,但似乎无法将其传递回函数。我想过使用切换盒但是我没有ID来继续运行

任何帮助都将是非常感激的。

function cal() {
var story = Number(document.getElementById("story").value);
var width = Number(document.getElementById("width").value);
var length = Number(document.getElementById("length").value);
var kitchen = Number(document.getElementById("kitchen").value);
var bathroom = Number(document.getElementById("bathroom").value);
var qgut = text(document.getelementbyid("gut").value);
var qbst = text(document.getelementbyid("bst").value);
var qoil = text(document.getelementbyid("oil").value);
var qheat = text(document.getelementbyid("heat").value);
var qac = text(document.getelementbyid("ac").value);
var qbrick = text(document.getelementbyid("brick").value);
var totalsqft;
var electricalcostlow;
var electricalcosthigh;
var pipingcostlow;
var pipingcosthigh;
var oilcostlow;
var oilcosthigh;
var heatingcostlow;
var heatingcosthigh;
var accostlow;
var accosthigh;
var generallow;
var generalhigh;
var bricklow;
var brickhigh;
var kitchencostlow = kitchen *1;
var kitchencosthigh = kitchen *2;
var bathroomcostlow = bathroom *1;
var bathroomcosthigh = bathroom * 2;
var estlow;
var esthigh;

if (qbst == "yes") { totalsqft = (story+1)*(width*length)}
else {  totalsqft = (story)*(width*length)}

if(qgut == "yes") {  electricalcostlow = totalsqft*1}
else { electricalcostlow = totalsqft *2}

if(qgut == "yes") { electricalcosthigh = totalsqft*1}
else { electricalcosthigh = totalsqft *2}

if(qgut == "yes") {  pipingcostlow = totalsqft*1}
else {pipingcostlow = totalsqft *2}

if(qgut == "yes") { pipingcosthigh = totalsqft*1}
else {pipingcosthigh = totalsqft *2}

if(qoil == "yes") {  oilcostlow = 1; oilcosthigh = 2}
else {oilcostlow = 0; oilcosthigh = 0}
if(qheat == "yes") {heatingcostlow = story*1; heatingcosthigh = story*2}
else {heatingcostlow = 0; heatingcosthigh = 0}

if(qac == "yes") {accostlow = story*1; heatingcosthigh = story*2}
else {accostlow = 0; accosthigh = 0}

if(qgut == "yes") {generallow = totalsqft*2}
else { generallow = totalsqft *1}

if(qgut == "yes") { generalhigh = totalsqft*2}
else { generalhigh = totalsqft *1}

if(qbrick == "yes") {bricklow = ((width * length)*1)*2}
else { generallow = 0}

if(qbrick == "yes") { brickhigh = ((width*length)*1)*2}
else { brickhigh = 0}

estlow = bricklow+generallow+accostlow+heatingcostlow+oilcostlow+pipingcostlow+electricalcostlow+kitchencostlow+bathroomcostlow;

esthigh = brickhigh+generalhigh+accosthigh+heatingcosthigh+oilcosthigh+pipingcosthigh+electricalcosthigh+kitchencosthigh+bathroomcosthigh;
document.getElementById("estlow").innerHTML = length * width;
document.getElementById("esthigh").innerHTML = width * length;
}
<div>
<h1>Property Rehab Estimator - Enter details below</h1>
<form>
<h3>
Answer questions:</h3>
Is this a full gut?  
<select id="gut">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
Is this there a basement? 
<select id="bst">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
Is there an oil tank that needs to be removed? 
<select id="oil">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
Does it need a new heating system? 
<select id="heat">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
Does it need a new A/C system? 
<select id="AC">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
Does it need masonry work? 
<select id="brick">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>  
<h3>
Enter property dimensions:</h3>
Total # of stories with attic (not including basement)  <input type="numbers" id="story" placeholder="story" />
<br />
Building Width <input type="numbers" id="width" placeholder="width" />
<br />
Building Length <input type="numbers" id="length" placeholder="length" />
<br />
Total # of kitchens (include ones you want to add during rehab)  <input type="numbers" id="ktichen" placeholder="# of kitchen" />
<br />
Total # of bathroom (include ones you want to add during rehab) <input type="numbers" id="bathroom" placeholder="# of bathroom" />
<br />
<br/>
<br/>
<input id="est" type="button" value="Estimate" onclick="cal()" />
<input id="reset" type="reset" value="Reset" />
</form>
<h1 id="estlow"> Low Estimate = </h1>
<h1 id="esthigh"> High Estimate = </h1>
</div>

您的代码中有一些拼写不匹配,例如-

在HTML文件中,您已经给出了id,厨房"试图进入"厨房">

var kitchen = Number(document.getElementById("ktichen").value);

在HTML文件中,您已经给出了id "AC"并试图访问"ac">

var qac = (document.getElementById("ac"));

在HTML文件中,您已经给出了"Yes"并尝试匹配"yes",所以这里要么使用准确的值来匹配,要么将两边相等转换为小写。

if (qbst === "Yes") { // }

我修改了代码,并运行了一下,现在正常工作,没有任何错误,我没有检查计算,你可以验证一下。尝试用下面的代码替换-

function cal() {
var story = Number(document.getElementById("story").value);
var width = Number(document.getElementById("width").value);
var length = Number(document.getElementById("length").value);
var kitchen = Number(document.getElementById("ktichen").value);
var bathroom = Number(document.getElementById("bathroom").value);
var qgut = (document.getElementById("gut"));
var qbst = (document.getElementById("bst").value);
var qoil = (document.getElementById("oil"));
var qheat = (document.getElementById("heat"));
var qac = (document.getElementById("AC"));
var qbrick = (document.getElementById("brick"));
var totalsqft;
var electricalcostlow;
var electricalcosthigh;
var pipingcostlow;
var pipingcosthigh;
var oilcostlow;
var oilcosthigh;
var heatingcostlow;
var heatingcosthigh;
var accostlow;
var accosthigh;
var generallow;
var generalhigh;
var bricklow;
var brickhigh;
var kitchencostlow = kitchen * 1;
var kitchencosthigh = kitchen * 2;
var bathroomcostlow = bathroom * 1;
var bathroomcosthigh = bathroom * 2;
var estlow;
var esthigh;
if (qbst === "Yes") {
totalsqft = (story + 1) * (width * length)
} else {
totalsqft = (story) * (width * length)
}
if (qgut === "Yes") {
electricalcostlow = totalsqft * 1
} else {
electricalcostlow = totalsqft * 2
}
if (qgut === "Yes") {
electricalcosthigh = totalsqft * 1
} else {
electricalcosthigh = totalsqft * 2
}
if (qgut === "Yes") {
pipingcostlow = totalsqft * 1
} else {
pipingcostlow = totalsqft * 2
}
if (qgut === "Yes") {
pipingcosthigh = totalsqft * 1
} else {
pipingcosthigh = totalsqft * 2
}
if (qoil === "Yes") {
oilcostlow = 1;
oilcosthigh = 2
} else {
oilcostlow = 0;
oilcosthigh = 0
}
if (qheat === "Yes") {
heatingcostlow = story * 1;
heatingcosthigh = story * 2
} else {
heatingcostlow = 0;
heatingcosthigh = 0
}
if (qac === "Yes") {
accostlow = story * 1;
heatingcosthigh = story * 2
} else {
accostlow = 0;
accosthigh = 0
}
if (qgut === "Yes") {
generallow = totalsqft * 2
} else {
generallow = totalsqft * 1
}
if (qgut === "Yes") {
generalhigh = totalsqft * 2
} else {
generalhigh = totalsqft * 1
}
if (qbrick === "Yes") {
bricklow = ((width * length) * 1) * 2
} else {
generallow = 0
}
if (qbrick === "Yes") {
brickhigh = ((width * length) * 1) * 2
} else {
brickhigh = 0
}
estlow = bricklow + generallow + accostlow + heatingcostlow + oilcostlow + pipingcostlow + electricalcostlow + kitchencostlow + bathroomcostlow;
esthigh = brickhigh + generalhigh + accosthigh + heatingcosthigh + oilcosthigh + pipingcosthigh + electricalcosthigh + kitchencosthigh + bathroomcosthigh;
document.getElementById("estlow").innerHTML = length * width;
document.getElementById("esthigh").innerHTML = width * length;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>Property Rehab Estimator - Enter details below</h1>
<form>
<h3>
Answer questions:
</h3>
Is this a full gut?
<select id="gut">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
Is this there a basement?
<select id="bst">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
Is there an oil tank that needs to be removed?
<select id="oil">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
Does it need a new heating system?
<select id="heat">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
Does it need a new A/C system?
<select id="AC">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
Does it need masonry work?
<select id="brick">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br/>
<h3>
Enter property dimensions:
</h3>
Total # of stories with attic (not including basement)  <input type="numbers" id="story" placeholder="story" />
<br />
Building Width <input type="numbers" id="width" placeholder="width" />
<br />
Building Length <input type="numbers" id="length" placeholder="length" />
<br />
Total # of kitchens (include ones you want to add during rehab)  <input type="numbers" id="ktichen" placeholder="# of kitchen" />
<br />
Total # of bathroom (include ones you want to add during rehab) <input type="numbers" id="bathroom" placeholder="# of bathroom" />
<br />
<br/>
<br/>
<input id="est" type="button" value="Estimate" onclick="cal()" />
<input id="reset" type="reset" value="Reset" />
</form>
<h1 id="estlow"> Low Estimate = </h1>
<h1 id="esthigh"> High Estimate = </h1>
</div>
</body>
</html>

最新更新