Почему не берутся данные из формы

Question

    <form action="" method="get">
        <input type="text" name="input_first_number" id="sum1">
        <input type="text" name="input_second_number" id="sum2">
        <input type="button" value="Применить" onclick="sum()"/>
    </form>

     let sum1 = document.getElementById("sum1").value;
     let sum2 = document.getElementById("sum2").value;
     function sum() {
         alert(+sum1 + +sum2);
 }

алерт выводит 0, я ожидал, что будет выводится сумма формы sum1 и формы sum2

Answer 1

Потому что Вы получаете значения sum1 и sum2 во время загрузки страницы, когда инпуты пустые.

function sum() {
  let sum1 = document.getElementById("sum1").value;
  let sum2 = document.getElementById("sum2").value;
  alert(+sum1 + +sum2);
}

или

let sum1 = document.getElementById("sum1");
let sum2 = document.getElementById("sum2");
function sum() {
  alert(+sum1.value + +sum2.value);
}

Answer 2

Используй JQ

$('input[type="button"]').click(()=>{
    const sum1 = parseInt($('#sum1').val());
    const sum2 = parseInt($('#sum2').val());
    const fin = summ(sum1, sum2);
    console.log(fin);
    // либо без одноразовых пелеменных:
    console.log(summ($('#sum1').val(), $('#sum2').val()));
});

const summ=(a, b)=>(a+b);

БЛОГ НА HUSL

Почему не берутся данные из формы

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