Question

我正在练习JavaScript。当我添加其他功能时，总计将无法计算。

这是我编写函数的javascript代码和执行总代码的HTML代码。

我的html代码包含一个文本输入和两个用于输入值的选择元素。之后，它将实时显示总数。

var cpaper_wt = new Array();

cpaper_wt["60"] = 200;
cpaper_wt["70"] = 5;
cpaper_wt["80"] = 5;
cpaper_wt["90"] = 7;
cpaper_wt["100"] = 8;
cpaper_wt["110"] = 10;
cpaper_wt["120"] = 5;
cpaper_wt["130"] = 9;
cpaper_wt["150"] = 5;
cpaper_wt["170"] = 5;
cpaper_wt["180"] = 8;
cpaper_wt["200"] = 1000;
cpaper_wt["240"] = 12;
cpaper_wt["250"] = 12;
cpaper_wt["300"] = 12;



function getcpwt() {
  var cpwt = 0;
  var theForm = document.forms["parameterForm"];
  var selectedcpwt = theForm.elements["c_paper_weight"];

  cpwt = cpaper_wt[selectedcpwt.value];

  return cpwt;
}




var ipaper_wt = new Array();

ipaper_wt["60"] = 100;
ipaper_wt["70"] = 5;
ipaper_wt["80"] = 5;
ipaper_wt["90"] = 7;
ipaper_wt["100"] = 8;
ipaper_wt["110"] = 10;
ipaper_wt["120"] = 5;
ipaper_wt["130"] = 9;
ipaper_wt["150"] = 5;
ipaper_wt["170"] = 5;
ipaper_wt["180"] = 8;
ipaper_wt["200"] = 7;
ipaper_wt["240"] = 12;
ipaper_wt["250"] = 12;
ipaper_wt["300"] = 12;



function getipwt() {
  var ipwt = 0;
  var theForm = document.forms["parameterForm"];
  var selectedipwt = theForm.elements["ip_paper_weight"];

  ipwt = ipaper_wt[selectedipwt.value];

  return ipwt;
}

//Cover Product Color
var cpc = new Array();

cpc["10"] = 100;
cpc["20"] = 500;
cpc["30"] = 550;
cpc["40"] = 700;




function getcpc() {
  var cover_pc = 0;
  var theForm = document.forms["parameterForm"];
  var selectedcover_pc = theForm.elements["c_product_color"];

  cover_pc = cpc[selectedcover_pc.value];

  return cover_pc;
}





//No of inner pages

function nofip() {
  var x = parseInt(document.getElementById("inner").value);

  return x;
}



function calculateTotal() {
  //Here we get the total price by calling our function
  //Each function returns a number so by calling them we add the values they return together
  var base_price = 600 + getipwt() + getcpwt() + getcpc();
  var BPrice = base_price + nofip();

  //display the result
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Total Price is $" + BPrice;

}




function hideTotal() {
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'none';
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="test1.js"></script>
  <link href="test.css" rel="stylesheet" type="text/css" />

</head>

<body onload="hideTotal()">
  <!--<div id="wrap">-->
  <form action="" id="parameterForm" onsubmit="return false;">
    <div>
      <div class="cont_order">
        <fieldset>
          <select onchange="calculateTotal()" name="c_paper_weight" id="c_paper_weight" required>
            <option value="">Select</option>
            <option value="60">60 GSM</option>
            <option value="70">70 GSM</option>
            <option value="80">80 GSM</option>
            <option value="90">90 GSM</option>
            <option value="100">100 GSM</option>
            <option value="110">110 GSM</option>
            <option value="120">120 GSM</option>
            <option value="130">130 GSM</option>
            <option value="150">150 GSM</option>
            <option value="170">170 GSM</option>
            <option value="180">180 GSM</option>
            <option value="200">200 GSM</option>
            <option value="240">240 GSM</option>
            <option value="250">250 GSM</option>
            <option value="300">300 GSM</option>
          </select>

          <select name="ip_paper_weight" id="ip_paper_weight" required onchange="calculateTotal()">
            <option value="">Select</option>
            <option value="60">60 GSM</option>
            <option value="70">70 GSM</option>
            <option value="80">80 GSM</option>
            <option value="90">90 GSM</option>
            <option value="100">100 GSM</option>
            <option value="110">110 GSM</option>
            <option value="120">120 GSM</option>
            <option value="130">130 GSM</option>
            <option value="150">150 GSM</option>
            <option value="170">170 GSM</option>
            <option value="180">180 GSM</option>
            <option value="200">200 GSM</option>
            <option value="240">240 GSM</option>
            <option value="250">250 GSM</option>
            <option value="300">300 GSM</option>
          </select>

          <label>Inner Pages</label>
          <input name="inner_pages" type="number" id="inner" value="0" placeholder="Inner pages." oninput="calculateTotal()">


          <label>Cover Product Color</label>
          <select name="c_product_color" id="c_product_color" required onchange="calculateTotal()">
            <option value="">Select</option>
            <option value="1">Single Color</option>
            <option value="2">Two Colors</option>
            <option value="3">Three Colors</option>
            <option value="4">Multi Colors</option>
          </select>

          <div id="totalPrice"></div>

        </fieldset>
      </div>
    </div>
  </form>
  <!--</div>End of wrap-->
</body>

</html>

Answer 1

问题在这里： cover_pc = cpc[selectedcover_pc.value];

无论出于何种原因，您的cpc数组都以10为增量建立索引，因此您可以通过将该行更改为以下内容来解决此问题：

cover_pc = cpc[selectedcover_pc.value*10];

添加功能后为什么不计算总和？

1 个答案: