Как суммировать два числа полученные из input от пользователя JS?

Question

Есть задание "Создайте два input и кнопку. В input пользователь вводит числа. При нажатии кнопки выполняется функция, которая выводит сумму данных двух чисел на страницу в .out-13."
Я написал:

<form>
    <input type="number" id="i-12_1">
    <input type="number" id="i-12_2">
    <button class="b-13">Button</button>
</form>
<script>
<form>
    <input type="number" id="i-12_1">
    <input type="number" id="i-12_2">
    <button class="b-13">Button</button>
</form>
</script>

Числа у меня не суммируются, а просто соединяются

Answer 1

Вот так. Как и сказал товарищ в комментариях - input.value всегда дает строку. Если оттуда ожидается число, важно как можно раньше превратить полученную строку в числовой тип. (цитата OPTIMUS PRIME)

function sumInputs() {

   let num1 = Number( document.getElementById("i-12_1").value );
   let num2 = Number( document.getElementById("i-12_2").value );
   
   document.getElementById("out-13").innerHTML = num1 + num2;
   
}

<form action="#">

    <input type="number" id="i-12_1">
    <input type="number" id="i-12_2">
    <button class="b-13" onClick="sumInputs()">Button</button>
    <div id="out-13"></div>
    
</form>

Answer 2

Непонятно, почему новички брезгуют console.log использовать?

JQuery или нет - это неважно.

Ты берешь значение со страницы, оно почти всегда текстовое, и если делать текст+текст будет тексттекст, т.е. нужно из текста сделать число, ниже я привел два примера как это можно сделать

$('.button').click(()=>{
    let num1 = $('#adin').val();
    let num2 = $('#dva').val();
    
    console.log(num1, num2, typeof num1, typeof num2);
    
    num1 = +num1;
    num2 = parseInt(num2);
    
    console.log(num1, num2, typeof num1, typeof num2);
    
    const answer = num1 + num2;
    
    $('#outputin').text(answer);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="10" id="adin">
<input type="number" value="03" id="dva">
<button class="button">Button</button>
<div id="outputin"></div>

Answer 3

const output = document.querySelector('.out-13');
button.onclick = () =>
        output.innerHTML = +first.value + +second.value

<input id="first" type="number" />
<input id="second" type="number" />
<button id="button">SUBMIT</button>

<p class="out-13"></p>

БЛОГ НА HUSL

Как суммировать два числа полученные из input от пользователя JS?

Ответы (3 шт):