モーダル内のボタンをクリックして関数を呼び出すにはどうすればよいですか？

Question

私は商品を表示するモーダルとアイテム数を選択するカウンタを持っています。数量を増減するための上下のボタンがあります。ここではモーダルです：

<div id="productDetailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="productDetailModal" aria-hidden="true"> 
    <div id="productDetailDialog" class="modal-dialog"> 
    <div class="modal-content"> 
     <div id="counter" class="col-xs-6"> 
     <label for="qty"><abbr title="Quantity">Qty</abbr></label> 
     <input id="qty" value="0" /> 
     <button id="down" onclick="modify_qty(-1)">-1</button> 
     <button id="up" onclick="modify_qty(1)">+1</button> 
     </div> 

そして、ここでスクリプト関数である：私は#counterdivを取り、htmlページの本文にそれを配置する場合

function modify_qty(val) { 
    var qty = document.getElementById('qty').value; 
    var new_qty = parseInt(qty, 10) + val; 

    if (new_qty < 0) { 
    new_qty = 0; 
    } 
    console.log("Inside script.js function. new_qty= " + new_qty); 
    document.getElementById('qty').value = new_qty; 
    return new_qty; 
} 

カウンタが正常に動作します。それは動作しないモーダルでしかありません。私は関数の中でコンソールに出力し、関数がモーダル内で呼び出されていないようです。私は間違って何をしていますか？

Answer 1

あなたはjavascriptをどこに/どのように表示しているのかわかりませんが、コンソールのログにエラーがないかどうか確認すると、動作するはずです。

ここで働い例です： jsfiddle.net

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#productDetailModal">Open Modal</button> 
<div id="productDetailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="productDetailModal" aria-hidden="true"> 
<script> 
function modify_qty(val) { 
    var qty = document.getElementById('qty').value; 
    var new_qty = parseInt(qty, 10) + val; 

    if (new_qty < 0) { 
    new_qty = 0; 
    } 
    console.log("Inside script.js function. new_qty= " + new_qty); 
    document.getElementById('qty').value = new_qty; 
    return new_qty; 
} 
</script> 
    <div id="productDetailDialog" class="modal-dialog"> 
    <div class="modal-content"> 
     <div id="counter" class="col-xs-6"> 
     <label for="qty"><abbr title="Quantity">Qty</abbr></label> 
     <input id="qty" value="0" /> 
     <button id="down" onclick="modify_qty(-1)">-1</button> 
     <button id="up" onclick="modify_qty(1)">+1</button> 
     </div> 
    </div> 
    </div> 
</div>