javascript - 自动计算发生在先前的值上

Question

我有一个函数，可以增加一个数字，获取总数并将其乘以价格。但是，当我单击第一次递增的按钮时，它没有执行任何操作。我第二次单击该按钮，它就起作用了。但是，如果我然后单击减少的按钮，那么它会执行之前的功能(例如添加)，然后第二次按下它会减少值。

我知道 onClick="myFunction()" 可能位于错误的位置，但我不知道该放在哪里。我希望自动计算总数。演示可以在 http://alpha.kentishtours.co.uk/destinations/bruges.php 找到。

该函数获取该值并将其相乘并计算总数。

function myFunction()
{
    var a = document.getElementById('adult').value;
    z=39;
    x=a*z;
    var c = document.getElementById('child').value;
    if(a >= 1) {
        a=+30; }
    else {
        a=+39; }
    b=c;
    c=a*b
    d=x+c
    document.getElementById("total").innerHTML=d;
    document.getElementById("value").value = d;
    }`

这些按钮用于增加数字并调用函数进行计算。

<div class="calculator">
<div class="calculator-submodule input-group">
<h4>Adult (12+)</h4>
<button class="btn theme-btn" id="decrease" value="Decrease Value" onClick="myFunction()" >-</button>
<input type="text" id="adult" value="1" class="form-control input-usmall" min="0"  disabled>
<button class="btn theme-btn" id="increase" value="Increase Value" onClick="myFunction()" >+</button>
</div>
<div class="calculator-submodule input-group">
<h4>Child (2-11)</h4>
<button class="btn theme-btn" id="decreasec" value="Decrease Value" onClick="myFunction()" >-</button>
<input type="text" id="child" value="0" class="form-control input-usmall"  min="0" disabled>
<button class="btn theme-btn" id="increasec" value="Increase Value" onClick="myFunction()" >+</button>
 </div>

 <div class="calculator-submodule">
 <span class="pound">£</span>
 <span id="total">39</span><span class="pound">.00</span>
 </div>

Answer 1

你的increment.js脚本中有一些函数，当你在“myfuntion”中获取输入的值时，这些函数会改变它们。您需要计算更改值后的价格。

所以首先您应该从此文件中删除以下行:

http://alpha.kentishtours.co.uk/assets/scripts/increment.js

$("#increase").click(function(){
  var $n = $("#adult");
  $n.val(Number($n.val())+1);
}); 
$("#decrease").click(function(){
  var $n = $("#adult");
  $n.val(Number($n.val())-1);
}); 
$("#increasec").click(function(){
  var $n = $("#child");
  $n.val(Number($n.val())+1);
}); 
$("#decreasec").click(function(){
  var $n = $("#child");
  $n.val(Number($n.val())-1);
}); 

同时删除 HTML 表单中的 onClick="myFunction()" 属性。

然后将所有 myFunction 脚本更改为:

var adult = $('#adult'),
child = $('#child'),
total = $('#total'),
value = $('#value'),
increase = $('#increase'),
decrease = $('#decrease'),
increasec = $('#increasec'),
decreasec = $('#decreasec');

var calulate_price = function(a, c){   
  var p1 = 39,
      p2 = 30,
      PA = a * p1,
      PC, d;

  if(a >= 1) PC = c * p2;
  else PC = c * p1;

  d = PA + PC;

  total.text(d);
  value.val(d);
};

increase.click(function(){
  var a = Number(adult.val());
  var c = Number(child.val());  
  adult.val(++a);
  calulate_price(a, c);
}); 
decrease.click(function(){
  var a = Number(adult.val());
  var c = Number(child.val());  
  adult.val(--a);
  calulate_price(a, c);
}); 
increasec.click(function(){
  var a = Number(adult.val());
  var c = Number(child.val());  
  child.val(++c);
  calulate_price(a, c);
}); 
decreasec.click(function(){
  var a = Number(adult.val());
  var c = Number(child.val());  
  child.val(--c);
  calulate_price(a, c);
}); 

一切正常:http://jsbin.com/ohUniCa/2/edit?js,output