JavaScript：変数の値を合計し、divとして表示する方法は？

Question

私はJSの新しいユーザーで、HTML入力から2つの値を合計しようとしています。

問題： 私は3 HTML入力の持っている：type=numberによって

• 入力し（入力フィールドから番号を選択します）。 type=radio

と

2入力、私は（jQueryのを使用して）リアルタイムで選択radioボタンの値でnumberフィールドの値を合計します。

JS：

$('#quantity').click(function() { 
    $('#sum').text($(this).val()); 
}); 

$('#y').click(function() { 
    var y = document.querySelector('#y').value; 
    $('#sum').text($(this).val()).y; 
}); 

$('#x').click(function() { 
    var x = document.querySelector('#x').value; 
    $('#sum').text($(this).val()).x; 
}); 

HTML：

<form> 
    <input id="quantity" type="number"> 
    <input id="y" name="math" type="radio" value="0"> 
    <input id="x" name="math" type="radio" value="1"> 
</form> 
<span id="sum"></span> 

私はただ、 "数量" フィールドに値を選択radio入力の値を追加したいです。

例：「数量」フィールドの値が「100」で、「x」ラジオボタン（値= 1）をクリックすると「101」が印刷されます。

Answer 1

これはいかがですか？テキスト入力が更新された際にまず、それがラジオボタンに追加されませんでした。夫婦の小さな問題がありました

// Any time this is edited, update 
 
$('#quantity').on("input", function() { 
 
    $('#sum').text(sumThem()); 
 
}); 
 

 
// ANY radio button with the name math 
 
// gets clicked, we do this ONE function. 
 
$('[name=math]').click(function() { 
 
    $('#sum').text(sumThem()); 
 
}); 
 

 
function sumThem(){ 
 
    var qty = parseInt($("#quantity").val()) || 0; 
 
    var addend = parseInt($("[name=math]:checked").val()) || 0; 
 
    
 
    return qty + addend; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input id="quantity" type="number"> 
 
    <input id="y" name="math" type="radio" value="0"> 
 
    <input id="x" name="math" type="radio" value="1"> 
 
</form> 
 
<span id="sum"></span>

。次に、ラジオボタンがクリックされなかった場合、NaNの問題が発生していました。テキストを入力すると、値が0に設定されます。

Answer 2

フォームにidを追加（Iは、例えば、ここでmyFormを使用）し、これらの線に沿って何かを試してみてください。

$('#myForm input').change(function() { 
    var quantityVal = +$('#quantity').val(); 
    var radioVal = +$('[name="math"]:checked').val(); 
    var sum = quantityVal + radioVal; 
    $('#sum').text(sum) 
}); 

ここでは、そう、フォーム内のすべての入力に変更リスナーを追加していますそれらのうちのいずれかが何らかの形で変化した場合（あなたのようにはクリックしない）、その機能が実行されます。次に、jQueryを使用して、量入力からの値と、checkedというラジオの値を取得します。また、整数にキャストされているかどうかを確認するために、両方ともunary +を使用することがわかります。

最後に、sumスパンの値を設定します。空の無線値のエラーチェックを追加するか、既定値を設定してください。

Live example here