文章/答案/技术大牛

发布

社区首页 >问答首页 >自动计算发生在以前的值上

问自动计算发生在以前的值上
EN

Stack Overflow用户

提问于 2013-12-05 13:35:20

回答 1查看 605关注 0票数 1

我有一个函数，它增加一个数字，取总数并将其乘以一个价格。但是，当我单击第一次递增的按钮时，它不会做任何事情。我第二次点击这个按钮，它就能工作了。但是，如果我然后单击减少的按钮，那么它执行前面的函数(例如添加)，然后第二次按它会降低值。

我知道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>

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-12-05 14:08:57

在您的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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20401445

复制

相似问题

问自动计算发生在以前的值上
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动计算发生在以前的值上EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动计算发生在以前的值上
EN