Question

我用不同的模块构建了一个计算表单，除了1个元素外，它还可以工作。

整体计算建立为（值+值=总计），值均为常规数。

但是，我添加的最后一位是'百分比'值，它是表单中第一个值的10％。举个例子：值1 = 50，百分比值2 = 5（值1的10％），总计= 55

在我的代码中，这看起来如下：

var NonTrans_prices = new Array();
NonTrans_prices["NoneNon"] = 0;
NonTrans_prices["LemonNon"] = 5994;
NonTrans_prices["CustardNon"] = 7076;

function NonTrans() {
    var NonTransPrice = 0;
    var theForm = document.forms["GRANADANEO"];
    var selectedFilling = theForm.elements["NonTrans"];
    NonTransPrice = NonTrans_prices[selectedFilling.value];
    return NonTransPrice;
}
var price = NonTrans_prices;
var percentage = 10;
var costs = (price * percentage) / 100;
var optionprice = price + percentage;

function optionprice1() {
    var inscriptionPrice = 0;
    var theForm = document.forms["GRANADANEO"];
    var optionprice = theForm.elements["optionprice"];
    if (optionprice.checked == true) {
        inscriptionPrice = optionprice.value;
    }
    return inscriptionPrice;
}

function calculateTotal() {
    var cakePrice = NonTrans() + optionprice1();
    var divobj = document.getElementById('totalPrice');
    divobj.style.display = 'block';
    divobj.innerHTML = "Total Price: " + cakePrice + " \u20ac";
}

* NonTransPrice连接到下拉框，optionprice1连接到复选框。

只要勾选包含10％值的复选框，字母“on”就会添加到总价中。出了什么问题？

**抱歉忘记发布整个代码，以便你们/女孩可以测试：https://jsfiddle.net/6a55tm4j/ 出于某种原因，它没有显示jsfiddle中的总值，在我正在测试的实时网站上确实如此，这不是我面临的实际问题。实时链接：http://axesseurope.be/appalacarte/Calculator/axess_calculator.html

这是包含受.js代码影响的部分的HTML代码：

<body onload='hideTotal()'>
<div id="wrap">
<form action="" id="GRANADANEO" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<table><tr><td>
<label >NonTrans</label>
<select id="NonTrans" name='NonTrans' onchange="calculateTotal()">
<option value="NoneNon">Select Dimensions</option>
<option value="LemonNon">3,00 6,40 0,85</option>
<option value="CustardNon">3,00 7,50 0,85</option>
</select>
</td></tr></table>
<hr>
<br/>    
<label>Granada Neo Opties Algemeen</label>
<p>
<input type="checkbox" id="optionprice" name='optionprice' onclick="calculateTotal()" />
<label for='optionprice' class="inlinelabel">optionprice</label>
</p>
<p>
<input type="checkbox" id="SchuifdeurVoorzijde" name='SchuifdeurVoorzijde' onclick="calculateTotal()" />
<label for='SchuifdeurVoorzijde' class="inlinelabel">Schuifdeur in voorzijde</label>
</p>
<div id="totalPrice"></div>
</fieldset>
</div>
</div>  
</form>

Answer 1

最后在Scott Marcus的帮助下，这就是解决方案：

function optionprice1()
{
 var chkOptionPrice = document.getElementById("optionprice");
 var theForm = document.forms["GRANADANEO"];
 var selectedFilling = theForm.elements["NonTrans"];
 var lstNonTransValue = NonTrans_prices[selectedFilling.value];

 var inscriptionPrice = 0;

 if(optionprice.checked === true){

  // Look up the price in the array that matches the dropdown list's value
  var price = NonTrans_prices[selectedFilling.value];

  // Do the math to calculate 10% of the original price
  var percentage = 10;
  inscriptionPrice = (price * percentage) / 100;
 }

 // finally we return the inscriptionPrice
 return inscriptionPrice;
 }

Answer 2

复选框的值为＆＃34; on＆＃34;当他们被选中。确保您的复选框包含一个值属性，该属性包含它们所代表的有意义的数据。例如：

     <input type="checkbox" id="chkSomeId" name="chkSomeID" 
            value="someValueToBeWhenChecked">

对于单选按钮也是如此。

所以，在你的代码中，这一行：

 inscriptionPrice = optionprice.value

最有可能访问没有为其设置显式值的复选框或单选按钮的值，但会进行检查。

另外，请记住，从HTML中提取的所有值都作为字符串进入JavaScript，因此如果您需要对这些值进行数学计算，那么您将要使用parseInt()和parseFloat()。< / p>

更新：既然您已经发布了HTML，我看到了：

 <input type="checkbox" id="optionprice" name='optionprice' onclick="calculateTotal()" />

这正是我怀疑的。我的上述答案将纠正这个问题。该复选框需要为其设置值。

<强>更新：

在以下代码中：

 //Add percentage
 var price = NonTrans_prices;
 var percentage = 10;
 var costs = (price * percentage) / 100;
 var optionprice = price + percentage;

 //Add percentage
 function optionprice1()
 {
     var inscriptionPrice=0;
     //Get a refernce to the form id="GRANADANEO"
     var theForm = document.forms["GRANADANEO"];
     //Get a reference to the checkbox id="optionprice"
     var optionprice = theForm.elements["optionprice"];
     //If they checked the box set inscriptionPrice to 20
     if(optionprice.checked==true){
         inscriptionPrice=optionprice.value;
     }
     //finally we return the inscriptionPrice
     return inscriptionPrice;
 }

我认为您应该使用4 var行并将它们包含在函数中。我认为第一行：var price = NonTrans_prices;是不正确的，因为它将变量price设置为NonTrans价格的实际数组，而不是查找特定价格，即：

 var price = NonTrans_prices[document.getElementById("nonTransList").value];

然后，你的问题是，如果选中了optionPrice复选框，你试图访问复选框的值（正如我所说）并没有明确存在，所以你得到＆＃ 34;上＆＃34; （因为选中了复选框）。您应该做的是将价格设置为刚刚在上面一行完成的10％计算的结果。所以最终函数看起来像这样：

 function optionprice1()
 {
     var chkOptionPrice = document.getElementById("optionprice");
     var lstNonTransValue = document.getElementById(NonTrans).value;

     var inscriptionPrice = 0;

     if(optionprice.checked === true){

      // Look up the price in the array that matches the dropdown list's value
      var price = NonTrans_prices[lstNonTransValue];

      // Do the math to calculate 10% of the original price
      var percentage = 10;
      inscriptionPrice = (price * percentage) / 100;;
     }

     // finally we return the inscriptionPrice
     return inscriptionPrice;
 }

你很接近，但我认为，你绊倒了你的事情是你创建了一个与你的复选框同名的变量，在进行计算之后，你应该一直试图获得变量的值，但是你试图得到复选框的值，这不是答案所在。

我希望我已经理解了你想要的东西，但即使我的算法已关闭，我希望你能看到你不想使用复选框的值来得到你的答案，因为它没有存储任何价值。

在计算变量

2 个答案: