Radyo düğmesi seçeneklerine dayalı hesaplamalar

Question

Web projem için bir MEAN yığını kullanıyorum. Ön uç, birkaç kullanıcı girdisi isteyen basit bir kayıt formudur. Örneğin, "kaç ürünü satın alıyorsunuz?" Bir sonraki soru bir radyo düğmesi. Bu ürün büyük mi, küçük mü? Benim sorum şu: siparişin maliyetini almak için hesaplama # ürün * 42 + (büyük seçilirse 12) veya # ürün * 42 + (küçük seçilirse 0). Bunu javascript'te nasıl kodlarım (arka ucumda düğüm kullanıyorum). Başka bir deyişle, hesap koduma, kullanıcı bir radyo düğmesi seçtiğinde, aşağıdaki numarayı eklemeniz gerektiğini ve formüllerime yazılan ürünlerin sayısını nasıl geçeceğimi nasıl anlarım? Büyük radyo düğmesi seçeneği için küçük = ve değer = 2 için değer = 1 atayarak başladım. Bu sorunu çözdüğümde ayrıntıları kodlayabildiğim ve formülleri güncelleyebildiğimden genel bir örnek yararlı olacaktır. Teşekkür ederiz

Answer 1

istemci tarafında hesaplama yapmak istiyorum ve elementler gibi bir HTML formunda ise: 'ürün-sayımı' bir kimlikli (ürünlerin sayısı için bir girişi olan

<h1>Radio Buttons</h1> 
<form name="catch-radio" method="post"> 
    <div class="input"> 
    <span class="label">How many products are you buying?</span> 
    <input id="product-count" type="text" name="product_count" value="0"/> 
    <br/> 
    <span class="label">Is this product large or small?</span> 
    <br/> 
    <span class="label">Large</span> 
    <input type="radio" name="product-size" value="12" checked="checked"/> 
    <br/> 
    <span class="label">Small</span> 
    <input type="radio" name="product-size" value="0"/> 
    </div> 
</form> 
<div> 
    <h2>Cost of order:</h2> 
    <p id="calculation"></p> 
</div> 

) ve ürün boyutuna ('ürün boyutu' olarak adlandırılır) karşılık gelen radyo düğmeleri, maliyeti hesaplayabilir ve form alanlarına olay işleyicileri ekleyerek sayfadaki bir öğeye ('hesaplama' kimliği ile) çıktılayabilirsiniz. formda bir değişikliği kaydedin ve daha sonra, hesaplamayı gerçekleştirmek ve sayfayı aşağıdaki gibi güncellemek için bir işlevi çağıran bu işleyicilerden:

// Cost is the count of products purchased multipled by 42 then added 
// to 12 in the case that the product is large, and zero in the case 
// that the product is small 
function calculate_cost() { 
    let count = parseInt(document.getElementById('product-count').value); 
    if (count > 0) { 
     let size = 0; 
     for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) { 
      if (document.getElementsByName('product-size')[i].checked) { 
        size = parseInt(document.getElementsByName('product-size')[i].value); 
        break; 
      } 
     } 

     let cost = count * 42 + size 
     document.getElementById('calculation').innerHTML = cost; 
    } 
} 

// handlers for form input change 
// call calculate_cost() on change 
// note that the text input is an on-change event but for radio buttons 
// an onclick handler is needed for each button 
for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) { 
    document.getElementsByName('product-size')[i].onclick = function() { 
     calculate_cost(); 
    } 
} 
document.getElementById('product-count').onchange = function() { 
    calculate_cost(); 
} 

Burada CodePen bu hızlı demo koymak: http://codepen.io/P1xt/pen/yOKqXP/

özellikle ilginç bit radyo düğmeleri için, siz (ve bu bir tıklama olmamalıdır ayrı ayrı her düğme için bir tıklama işleyicisi eklemeniz gerekir olmasıdır bir değişiklik işleyici ve hangi radyoda seçili olduğunu belirlemek için, her birini 'kontrol' olup olmadığını kontrol etmek için açıkça kontrol etmeniz gerekir.

Not: Hesaplarınızı sunucu tarafında yapmak istiyorsanız, formu göndermeniz, ardından ürün formunu ve ürün boyutunu teslim etmek için gönderilen form öğelerinden toplamanız gerekir. hesaplama.

Answer 2

Neden radyo düğmelerinin değerleri olarak 0 ve 12'yi kullanmıyorsunuz, sonra arka plan seçilen değeri ekleyebilir?