我正在编写可视化的价目表。在此价格表中，用户可以选择他的项目功能，样式和渲染样式（Photo Realistic / Conceptual / Maket），同时在列表底部查看项目的总价。我无法弄清楚为什么代码无法计算价格...
<html>
<div id="RenderingTab" class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-
parent="#accordion1" href="#collapseTwo1">Render</a></h4>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<form>
<div class="panel-body">Project style :<br>
<br>
<div class="col-lg-6" data-toggle="buttons">
<select id="prjstrndr" class="panel-title"
onchange="RndrPrcCalc(this);">
<option class="input-group-addon" value="1.3" id="rndr-mdrn"
onchange="RndrPrcCalc(this); RndrIntPrc(this);" name="options" >
Modern </option>
<option class="input-group-addon" value="1" id="rndr-cls"
onchange="RndrPrcCalc(this); RndrIntPrc(this);" name="options" >
Classic </option>
<option class="input-group-addon" value="1.8" id="rndr-trd"
onchange="RndrPrcCalc(this); RndrIntPrc(this);" name="options" >
Traditional </option>
<option class="input-group-addon" value="0.9" id="rndr-param"
onchange="RndrPrcCalc(this); RndrIntPrc(this);" name="options" >
Parametric </option>
<option class="input-group-addon" value="1.1" id="rndr-org"
onchange="RndrPrcCalc(this); RndrIntPrc(this);" name="options" >
Organic </option>
</select>
</div>
</div>
</form>
<form>
<div class="panel-body">Project Function :<br>
<br>
<div class="col-lg-6" data-toggle="buttons">
<select id="prjfnrndr" class="panel-title"
onchange="RndrPrcCalc(this);">
<option class="input-group-addon" value="1.2" id="rndr-vll"
onchange="RndrPrcCalc(this); RndrIntPrc(this);" name="style">
Villa </option>
<option class="input-group-addon" value="1" id="rndr-
apprtmnt" onchange="RndrPrcCalc(this); RndrIntPrc(this);" name="style" >
Appartment </option>
<option class="input-group-addon" value="1.35" id="rndr-
cmmrcl" onchange="RndrPrcCalc(this); RndrIntPrc(this);" name="style" >
Commercial </option>
<option class="input-group-addon" value="1.3" id="rndr-offcl"
onchange="RndrPrcCalc(this); RndrIntPrc(this);" name="style" >
Official </option>
<option class="input-group-addon" value="1.25" id="rndr-othr"
onchange="RndrPrcCalc(this); RndrIntPrc(this);" name="style" >
Other </option>
</select>
</div>
</div>
</form>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-
parent="#accordion3" href="#collapseTwo3"> Interior Rendering</a></h4>
</div>
<div id="collapseTwo3" class="panel-collapse collapse">
<div class="panel-body">
<br>
<div id="rndr-lobbyParam" >
<div class="input-group input-group-sm"><span
class="input-group-addon paramtitle">Lobby wall area </span>
<input type="number" min="0" step="0.01" id="rndr-int-
wall-area-lobby" class="form-control" onchange="RndrIntPrc();"
placeholder=" 0.00 sqm " required="required">
</div>
<br>
<div class="input-group input-group-sm"><span
class="input-group-addon paramtitle">Photo Realistic </span>
<div class="row">
<div class="col-lg-6">
<div class="input-group"><span class="input-group-
addon">Day</span>
<input type="number" min="0" id="rndr-int-real-
day-lobby" class="form-control" placeholder="0 Num"
onchange="RndrIntPrc();">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group"><span class="input-group-
addon"> Night</span>
<input type="number" min="0" id="rndr-int-real-
nght-lobby" class="form-control" placeholder="0 Num"
onchange="RndrIntPrc();">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</div>
<div class="input-group input-group-sm"><span
class="input-group-addon paramtitle">Conceptual</span>
<div class="row">
<div class="col-lg-6">
<div class="input-group"><span class="input-group-
addon">Day</span>
<input type="number" min="0" id="rndr-int-conc-
day-lobby" class="form-control" placeholder="0 Num"
onchange="RndrIntPrc();">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group"><span class="input-group-
addon"> Night</span>
<input type="number" min="0" id="rndr-int-conc-
nght-lobby" class="form-control" placeholder="0 Num"
onchange="RndrIntPrc();">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</div>
<div class="input-group input-group-sm"><span
class="input-group-addon paramtitle">Maket</span>
<div class="row">
<div class="col-lg-6">
<div class="input-group"><span class="input-group-
addon">Day</span>
<input type="number" min="0" id="rndr-int-mak-
day-lobby" class="form-control" placeholder="0 Num" onchange="RndrIntPrc();">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group"><span class="input-group-
addon" disabled="disabled"> Night</span>
<input type="number" min="0" id="rndr-int-mak-
nght-lobby" class="form-control" placeholder="0 Num" disabled="disabled">
</div>
<br>
<label class="fa">Interior rendering Total price </label>
<input type="text" class="form-control" id="render-int-price"
placeholder= "0" readonly></input>
</html>
<script>
document.getElementById("prjstrndr").onchange = function()
{RndrIntPrc();};
document.getElementById("prjfnrndr").onchange = function()
{RndrIntPrc();};
document.getElementById("rndr-lobby").onchange = function()
{RndrIntPrc();};
document.getElementById("rndr-int-wall-area-lobby").onchange =
function() {RndrIntPrc();};
document.getElementById("rndr-int-real-day-lobby").onchange = function()
{RndrIntPrc();};
document.getElementById("rndr-int-real-nght-lobby").onchange =
function() {RndrIntPrc();};
document.getElementById("rndr-int-conc-day-lobby").onchange = function()
{RndrIntPrc();};
document.getElementById("rndr-int-conc-nght-lobby").onchange =
function()
{RndrIntPrc();};
document.getElementById("rndr-int-mak-day-lobby").onchange = function()
{RndrIntPrc();};
//interior render cost calculation:
var
RIRDL = document.getElementById("rndr-int-real-day-lobby"),
RIRNL = document.getElementById("rndr-int-real-nght-lobby"),
RICDL = document.getElementById("rndr-int-conc-day-lobby"),
RICNL = document.getElementById("rndr-int-conc-nght-lobby"),
RIMDL = document.getElementById("rndr-int-mak-day-lobby"),
Totalintrndr = 0;
document.getElementById('render-int-price').value = Totalintrndr;
var RndrIntPrc = function() {
var projectStylerndr = document.getElementById('prjstrndr').value,
projectFunctionrndr = document.getElementById('prjfnrndr').value,
RIWAL = document.getElementById("rndr-int-wall-area-lobby").value,
RIRDLNum = RIRDL.value,
RIRNLNum = RIRNL.value,
RICDLNum = RICDL.value,
RICNLNum = RICNL.value,
RIMDLNum = RIMDL.value,
XRL = 50000,
XCL = 25000,
XML = 10000,
var intNumD = [];
[RIRDLNum,RICDLNum,RIMDLNum].forEach(function(n, i) {
intNumD[i] = (n >= 2 && n < 5) ? n * 0.9 : n == 0 ? 0 : n == 1 ? 1 : n - 1;
});
var intNumN = [];
[RIRNLNum,RICNLNum].forEach(function(n, i) {
intNumN[i] = (n >= 2 && n < 5) ? n * 0.95 : n == 0 ? 0 : n == 1 ? 1.2 : n == 2 ? 1.9 : n - 1;
});
var Totalintrndr = projectStylerndr * projectFunctionrndr *
(Math.log(RIWAL)*((XRL)*(intNumD[0] + intNumN[0]) + (XCL)*(intNumD[1]
+ intNumN[1]) + (XML)*intNumD[2]) );
document.getElementById('render-int-price').value =
(Totalintrndr>0 && Totalintrndr!=='NaN')?Totalintrndr:0;
};
</script>
答案 0 :(得分：0)
修复所有拼写错误后，你必须阅读一些JS手册，而不是参加一些数学课程。 现在认真：
从JavaScript的角度来看，它会起作用。
查看代码here
的工作版本<html>
<div id="RenderingTab" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data- parent="#accordion1" href="#collapseTwo1">Render</a></h4>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<form>
<div class="panel-body">Project style :<br>
<br>
<div class="col-lg-6" data-toggle="buttons">
<select id="prjstrndr" class="panel-title" onchange="RndrIntPrc(this);">
<option class="input-group-addon" value="1.3" > Modern </option>
<option class="input-group-addon" value="1" > Classic </option>
<option class="input-group-addon" value="1.8" > Traditional </option>
<option class="input-group-addon" value="0.9" > Parametric </option>
<option class="input-group-addon" value="1.1" > Organic </option>
</select>
</div>
</div>
</form>
<form>
<div class="panel-body">Project Function :<br>
<br>
<div class="col-lg-6" data-toggle="buttons">
<select id="prjfnrndr" class="panel-title" onchange="RndrPrcCalc(this);">
<option class="input-group-addon" value="1.2" >Villa </option>
<option class="input-group-addon" value="1" >Appartment </option>
<option class="input-group-addon" value="1.35" >Commercial </option>
<option class="input-group-addon" value="1.3" > Official </option>
<option class="input-group-addon" value="1.25" >Other </option>
</select>
</div>
</div>
</form>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data- parent="#accordion3" href="#collapseTwo3"> Interior Rendering</a></h4>
</div>
<div id="collapseTwo3" class="panel-collapse collapse">
<div class="panel-body">
<br>
<div id="rndr-lobby">
<div class="input-group input-group-sm"><span class="input-group-addon paramtitle">Lobby wall area </span>
<input type="number" value=10 min="0" step="0.01" id="rndr-int-wall-area-lobby" class="form-control" onchange="RndrIntPrc();" placeholder=" 0.00 sqm " required="required">
</div>
<br>
<div class="input-group input-group-sm"><span class="input-group-addon paramtitle">Photo Realistic </span>
<div class="row">
<div class="col-lg-6">
<div class="input-group"><span class="input-group-addon">Day</span>
<input type="number" value="1" min="0" id="rndr-int-real-day-lobby" class="form-control" placeholder="0 Num" onchange="RndrIntPrc();">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group"><span class="input-group-addon"> Night</span>
<input type="number" min="0" id="rndr-int-real-nght-lobby" class="form-control" placeholder="0 Num" onchange="RndrIntPrc();">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</div>
<div class="input-group input-group-sm"><span class="input-group-addon paramtitle">Conceptual</span>
<div class="row">
<div class="col-lg-6">
<div class="input-group"><span class="input-group-addon">Day</span>
<input type="number" min="0" id="rndr-int-conc-day-lobby" class="form-control" placeholder="0 Num" onchange="RndrIntPrc();">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group"><span class="input-group-addon"> Night</span>
<input type="number" min="0" id="rndr-int-conc-nght-lobby" class="form-control" placeholder="0 Num" onchange="RndrIntPrc();">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</div>
<div class="input-group input-group-sm"><span class="input-group-addon paramtitle">Maket</span>
<div class="row">
<div class="col-lg-6">
<div class="input-group"><span class="input-group-addon">Day</span>
<input type="number" min="0" id="rndr-int-mak-day-lobby" class="form-control" placeholder="0 Num" onchange="RndrIntPrc();">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group"><span class="input-group-addon" disabled="disabled"> Night</span>
<input type="number" min="0" id="rndr-int-mak-nght-lobby" class="form-control" placeholder="0 Num" disabled="disabled">
</div>
<br>
<label class="fa">Interior rendering Total price </label>
<input type="text" class="form-control" id="render-int-price" placeholder="0" readonly></input>
</html>
<script>
document.getElementById("prjstrndr").onchange = function () { RndrIntPrc(); };
document.getElementById("prjfnrndr").onchange = function () { RndrIntPrc(); };
document.getElementById("rndr-lobby").onchange = function () { RndrIntPrc(); };
document.getElementById("rndr-int-wall-area-lobby").onchange = function () { RndrIntPrc(); };
document.getElementById("rndr-int-real-day-lobby").onchange = function () { RndrIntPrc(); };
document.getElementById("rndr-int-real-nght-lobby").onchange = function () { RndrIntPrc(); };
document.getElementById("rndr-int-conc-day-lobby").onchange = function () { RndrIntPrc(); };
document.getElementById("rndr-int-conc-nght-lobby").onchange = function () { RndrIntPrc(); };
document.getElementById("rndr-int-mak-day-lobby").onchange = function () { RndrIntPrc(); };
//interior render cost calculation:
var
RIRDL = document.getElementById("rndr-int-real-day-lobby"),
RIRNL = document.getElementById("rndr-int-real-nght-lobby"),
RICDL = document.getElementById("rndr-int-conc-day-lobby"),
RICNL = document.getElementById("rndr-int-conc-nght-lobby"),
RIMDL = document.getElementById("rndr-int-mak-day-lobby"),
Totalintrndr = 0;
document.getElementById('render-int-price').value = Totalintrndr;
var RndrIntPrc = function () {
console.log('1');
var projectStylerndr = document.getElementById('prjstrndr').value,
projectFunctionrndr = document.getElementById('prjfnrndr').value,
RIWAL = document.getElementById("rndr-int-wall-area-lobby").value,
RIRDLNum = RIRDL.value,
RIRNLNum = RIRNL.value,
RICDLNum = RICDL.value,
RICNLNum = RICNL.value,
RIMDLNum = RIMDL.value,
XRL = 50000,
XCL = 25000,
XML = 10000;
var intNumD = [];
[RIRDLNum, RICDLNum, RIMDLNum].forEach(function (n, i) {
intNumD[i] = (n >= 2 && n < 5) ? n * 0.9 : n == 0 ? 0 : n == 1 ? 1 : n - 1;
});
var intNumN = [];
[RIRNLNum, RICNLNum].forEach(function (n, i) {
intNumN[i] = (n >= 2 && n < 5) ? n * 0.95 : n == 0 ? 0 : n == 1 ? 1.2 : n == 2 ? 1.9 : n - 1;
});
var Totalintrndr = projectStylerndr * projectFunctionrndr *
(Math.log(RIWAL) * ((XRL) * (intNumD[0] + intNumN[0]) + (XCL) * (intNumD[1]
+ intNumN[1]) + (XML) * intNumD[2]));
document.getElementById('render-int-price').value =
(Totalintrndr > 0 && Totalintrndr !== 'NaN') ? Totalintrndr : 0;
};
RndrIntPrc();
</script>