1

数量の値を増減するボタンを作成しようとしています。

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;}
}

かなりカットされて乾燥しています。関数は、クリックされたボタンに応じて「上」または「下」に渡され、数量要素の現在の値に基づいて何をするかを決定します。残念ながら、それは何もしていません、そして私は理由を理解することができません。どんな助けでも大歓迎です。

4

2 に答える 2

4

先に進んでコードをフィドルに貼り付けたところ、onclickの時点でsetQuantity定義されていないというコンソールエラーが発生しました。関数を呼び出すマークアップの前に関数が宣言されていることを確認すると、問題が解決します：http: //jsfiddle.net/KR2Az/

于 2013-02-07T22:07:36.123 に答える
2

crowjonahがほのめかしているように、JavaScriptは理想的<HEAD>にはページのに表示されます。

また、次のようにJavaScriptをHTMLから分離することをお勧めします。

<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はこちら

于 2013-02-07T22:16:48.810 に答える