按下按钮时递增或递减

时间:2014-06-01 06:31:17

标签: javascript php

表单代码:

<td>
    <form action="cart.php" method="get">
        <input type="button" onclick="buttonSubtract1()" name="subtract1" 
               value="-"/>
        <input type="text" size="4" id="qty1" name="quantity1" value="0"/>
        <input type="button" onclick="buttonAdd1()" name="add1" value="+"/>
        <input type="submit" name="product1" value="Add"/>
    </form>
</td>

javascript:

var i = 0;
var qty1 =  document.getElementById('qty1').value;
function buttonAdd1() {
    document.getElementById('qty1').value = ++i;
}
function buttonSubtract1() {
if (qty1 > 0) {
    document.getElementById('qty1').value = --i;}
}

我使用javascript将代码更改为递增和递增,因此我尝试使得只有在数字为正但现在递增工作正常但不允许递增的情况下,递增才起作用任何数字。这是为什么?

4 个答案:

答案 0 :(得分:1)

<强> View this working demo

您的问题是,您没有检查元素的值,只是qty1在页面加载时设置但从未更新。

function buttonSubtract1() {
    var qtyElement = document.getElementById('qty1'); // the element
    if (qtyElement.value > 0) qtyElement.value = --i; // if its value at this point in time >0 change it
}

以上修复了您当前的代码,但是......

为什么不少写(这是你需要的唯一功能)

function buttonAlter(which, byWhat){
    var qtyElement = document.getElementById('qty' + which);
    if (byWhat > 0 || qtyElement.value > 0) qtyElement.value = parseInt(qtyElement.value) + byWhat;    
}

了解更多按钮

<form action="cart.php" method="get">
     <input type="button" onclick="buttonAlter(1, -1)" name="subtract1" value="-"/>
     <input type="text" size="4" id="qty1" name="quantity1" value="0"/>
     <input type="button" onclick="buttonAlter(1, 1)" name="add1" value="+"/>
     <input type="submit" name="product1" value="Add"/>
    <br />
     <input type="button" onclick="buttonAlter(2, -1)" name="subtract1" value="-"/>
     <input type="text" size="4" id="qty2" name="quantity1" value="0"/>
     <input type="button" onclick="buttonAlter(2, 1)" name="add1" value="+"/>
     <input type="submit" name="product1" value="Add"/>
    <br />
     <input type="button" onclick="buttonAlter(3, -1)" name="subtract1" value="-"/>
     <input type="text" size="4" id="qty3" name="quantity1" value="0"/>
     <input type="button" onclick="buttonAlter(3, 1)" name="add1" value="+"/>
     <input type="submit" name="product1" value="Add"/>
</form>

<强> This version's demo

答案 1 :(得分:0)

<?php if (isset($_GET['subtract1'])) { 
    $quantity1 = $_GET['$quantity1'];
    $quantity1--;
}
?>

<?php if (isset($_GET['add1'])) { 
    $quantity1 = $_GET['$quantity1'];
    $quantity1++;
}
?>

<form action="cart.php" method="get">
     <input type="submit" name="subtract1" value="-"/>
     <input type="text" size="4" name="$quantity1" value="<?php echo $quantity1 ?>"/>
     <input type="submit" name="add1" value="+"/>

答案 2 :(得分:0)

尝试以下方法。 确保php代码高于html(以便在输出数据之前处理数据):

<?php
if(isset($_GET['quantity1'])) {
    $quantity1 = intval($_GET['quantity1']);
    if(isset($_GET['subtract1'])) { 
        $quantity1--;
    } else if (isset($_GET['add1'])) {
        $quantity1++;
    }
}
?>
<td>
<form action="cart.php" method="get">
    <input type="button" name="subtract1" value="-" />
    <input type="text" size="4" name="quantity1" value="<?php echo $quantity1; ?>" />
    <input type="button" name="add1" value="+" />
    <input type="submit" name="product1" value="Add" />
</form>
</td>

答案 3 :(得分:0)

我的理解是获取对象(qty1)的引用,然后根据需要测试或更改属性。这段代码似乎做了所需要的。它会发送适当的值作为&#39; $ _ GET&#39;在PHP中检查的参数。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
    <script type = 'text/javascript'>
        var rfvGlobal = {};
        function buttonAdd1() {
            rfvGlobal.qty1.value++;
        }
        function buttonSubtract1() {
            if (rfvGlobal.qty1.value > 0) {
                rfvGlobal.qty1.value--;
            }
        }
    </script>
  </head>
  <body>

<table>
<td><form action="" method="get">
     <input type="button" onclick="buttonSubtract1()" name="subtract1" value="-"/>
     <input type="text" size="4" id="qty1" name="quantity1" value="0"/>
     <input type="button" onclick="buttonAdd1()" name="add1" value="+"/>
     <input type="submit" name="product1" value="Add"/>
 </form></td>
 </table>  
 <script>
    rfvGlobal.qty1 = document.getElementById('qty1');
 </script>
</body>
</html>