总价不变，我希望在更改数字时看到总价发生变化？

Question

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

Answer 1

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

Math.log(x) - returns number < 0 if x < 1. 所以除非 rndr-int-wall-area-lobby < 1 - 你会得到“0”作为总价.
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>

总价不变，我希望在更改数字时看到总价发生变化？

Total price does not change, I expect to see change in Total price while changing the numbers?

javascript

list

price

calculation