HTML/JavaScript - 數量不起作用的向上和向下按鈕

我試圖創建增加或減少數量值的按鈕。HTML/JavaScript - 數量不起作用的向上和向下按鈕

HTML：

<div class="order-option"> 
    Quantity: 
    <span id="quantity-field"> 
     <button id="up" onclick="setQuantity('up');">+</button> 
     <input type="text" id="quantity" value="1"> 
     <button id="down" onclick="setQuantity('down');">-</button> 
    </span> 
</div>

的JavaScript：

function setQuantity(upordown) { 
    var quantity = document.getElementById('quantity'); 

    if (quantity.value > 1) { 
     if (upordown == 'up'){++document.getElementById('quantity').value;} 
     else if (upordown == 'down'){--document.getElementById('quantity').value;}} 
    else if (quantity.value == 1) { 
     if (upordown == 'up'){++document.getElementById('quantity').value;}} 
    else 
     {document.getElementById('quantity').value=1;} 
}

這是很添油加醋。該功能根據點擊哪個按鈕而向上或向下傳遞，然後根據數量元素的當前值確定要執行的操作。不幸的是，它沒有做一件事，我不明白爲什麼。任何幫助將非常感激。

來源

2013-02-07 Todd Bauer

我們可以看到一個[小提琴]（http://jsfiddle.net）？ – Mooseman

它適用於我 – edi9999

我繼續前進，並將代碼粘貼到小提琴中，並得到控制檯錯誤，在onclick時，setQuantity未定義。確保之前調用它的標記解決了這個問題對我來說，函數聲明： http://jsfiddle.net/KR2Az/

來源

2013-02-07 22:07:36 crowjonah

是的，就是這樣！我應該比這更清楚。感謝您的幫助，也感謝提醒我，小提琴存在。 –

正如crowjonah提到，你的JavaScript應該理想地出現在頁面的<HEAD>。

我也建議您從HTML分離的JavaScript這樣的：

<script> 
quantity = document.getElementById('quantity'); 

button_up=document.getElementById('up'); 
button_down=document.getElementById('down'); 

button_up.onclick=function() {setQuantity('up');} 
button_down.onclick=function() {setQuantity('down');} 

function setQuantity(upordown) { 
    var quantity = document.getElementById('quantity'); 

    if (quantity.value > 1) { 
     if (upordown == 'up'){++quantity.value;} 
     else if (upordown == 'down'){--quantity.value;}} 
    else if (quantity.value == 1) { 
     if (upordown == 'up'){++quantity.value;}} 
    else 
     {quantity.value=1;} 
} 
</script> 


<div class="order-option"> 
    Quantity: 
    <span id="quantity-field"> 
     <button id="up">+</button> 
     <input type="text" id="quantity" value="1"> 
     <button id="down">-</button> 
    </span> 
</div>

jFiddle here

來源

2013-02-07 22:16:48 showdev

HTML/JavaScript - 數量不起作用的向上和向下按鈕

回答

相關問題