Düğme üzerindeki bir işlevi nasıl bir modda çağırabilirim?

Question

Ürünlerin birini seçmek için bir ürün ve sayaç görüntüleyen bir modelim var. Miktarı artırmak veya azaltmak için yukarı ve aşağı düğmeleri vardır. İşte kalıcı olan:

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

Ve burada komut fonksiyonu: Ben #counterdiv almak ve html sayfasının gövdesinde yerleştirin eğer

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

sayaç çalışıyor. Sadece işe yaramazsa modalda. İşlevde konsola çıktılar ve işlev modalın içinde aranmıyor gibi görünüyor. Neyi yanlış yapıyorum?

Answer 1

Javascript'i nasıl/nereye eklediğinizi göstermiyorsunuz, ancak kapsamda olduğundan emin olursanız (konsol günlüklerini hatalar için kontrol edin), çalışmalıdır. 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>