总价没有变化，我希望在更改数字时看到总价的变化？答案

【问题标题】：Total price does not change, I expect to see change in Total price while changing the numbers?总价没有变化，我希望在更改数字时看到总价的变化？
【发布时间】：2017-07-20 19:02:59
【问题描述】：

我正在为可视化编写价目表。在此价格表中，用户可以选择自己的项目功能、风格和渲染风格（照片写实/概念/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>

【问题讨论】：

这段代码中有一堆非常明显的 javascript 错误，一个 var 行跟在一个以逗号结尾的行之后，“rndr-lobby”不存在，所以，如果你的问题是只是修复这些错误使用您的浏览器控制台来查找和修复它们。如果您的问题与此无关，请先在此处修复您的代码，以便我们对其进行测试。
问题依然存在。

标签： javascript list price calculation

【解决方案1】：

在修复所有拼写错误后，您必须阅读一些 JS 手册，而不是学习一些数学课程。现在认真：

Math.log(x) - 如果 x
option 元素没有 onchange

从 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>

【讨论】：

您能否突出显示您所做的更改？
使用任何比较工具查看