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

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

1 个答案: