JavaScript: как суммировать значения переменных и отображать как div?

Question

Я новый пользователь в JS, и я пытаюсь суммировать 2 значения из ввода HTML.

Проблема: У меня есть 3 HTML ввода-х:

• Вклад type=number (выберите номер из поля ввода);
• 2 входа с type=radio

Я хочу суммировать значение number поля со значением выбранного radio кнопки в режиме реального времени (с помощью JQuery).

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 в форму (я использовал 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