使用Javascript/HTML更新两组值的按钮

Button that updates 2 sets of values using Javascript/HTML?

本文关键字：两组 按钮 Javascript HTML 更新 使用      更新时间：2023-09-26

我正在制作一个简单的购物车，我制作了一个带有-和+按钮的数量检查器来更改所需的数量，并且它只接受文本字段中的数字。然而，我需要使所需的数量与显示的总价相匹配。并且需要它在不刷新的情况下进行更新。（例如，1件=3000000美元，2件=6000000美元）

这是javascript：

          <script type="text/javascript">
function subtractQty(){
if(document.getElementById("qty").value - 1 < 1)
return;
else
document.getElementById("qty").value--;
}
function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

 </script>

这就是HTML:

<form name="f1" action="" method="post">
<input type='text' name='qty' id='qty' value='1' onkeypress="return isNumber(event)" />
<input type='button' name='subtract' onclick='javascript: subtractQty();' value='-'/>
<input type='button' name='add' onclick='javascript: document.getElementById("qty").value++;' value='+'/>
<input type='submit' name='buy' value="buy">
<input type='hidden' name='product code' value="3">
</form>

http://jsfiddle.net/BRF6g/4/-JSfiddle中有所有的代码，我试图让3000000的基本值在每次数量改变时都改变，因为这是物品的价格。（注意：-按钮在chrome浏览器上有效，但由于某种原因，在这个编辑器上无效）

这项工作：

<form name="f1" action="" method="post">
<input type='text' name='qty' id='qty' value='1' onkeyup="updatePrice()" />
<input type='button' name='subtract' onclick='javascript: subtractQty();updatePrice();' value='-'/>
<input type='button' name='add' onclick='javascript:document.getElementById("qty").value++;updatePrice();' value='+'/>
<input type='submit' name='buy' value="buy">
<input type='hidden' name='product code' value="3">
<span>The Cost($): <span id="total">3000000</span></span>
</form>
<script>
function subtractQty(){
if(document.getElementById("qty").value - 1 < 1)
return;
else
document.getElementById("qty").value--;
}
function updatePrice()
{
    var price = 3000000;
    var inputqty = document.getElementById("qty");
    qty = inputqty.value;
    newqty = parseInt(qty) *  parseInt(price);  
    document.getElementById("total").innerHTML = parseInt(newqty);
}
</script>

您可以使用OnClick函数。

此答案解决了在不刷新页面的情况下更新值的问题。

希望这能有所帮助。

请留下反馈。

相关文章：