Создание калькулятора с использованием HTML-кода JavaScript, который берет значения из двух входных тегов и возвращает окончательный ответ при нажатии кнопки «Отправить».

Question

Калькулятор, который берет числа, записанные во входном теге пользователями, а затем добавляет их при нажатии кнопки "Отправить" и показывает результат.

var numOne = document.getElementById("first");
var numTwo = 
document.getElementById("second");
var submit = document.getElementById("submit");
var added = document.getElementById("answer");

submit.addEventListner( function(){
var one = numOne.value;
var two = numTwo.value;
added.innerHTML = one + two;

}) Пожалуйста, скажи мне ошибку

Answer 1

HTML

<input type="number" id="a">
<input type="number" id="b">
<input type="submit" id="submit">

<h1 id="answer"></h1>

Javascript

var submit = document.querySelector('#submit');
var answer = document.querySelector('#answer');

submit.addEventListener('click', () => {
    var a = document.querySelector('#a').value;
    var b = document.querySelector('#b').value;
    answer.textContent = Number(a) + Number(b);
})

Это довольно просто, но его можно расширить для правильной проверки ввода и других вычислений.

Во-первых, если вы посмотрите на HTML, вы увидите два поля ввода чисел и одну кнопку отправки. Обратите внимание, что я дал им все идентификаторы, чтобы мы могли выбрать их в нашем файле JS. Я также предоставил пустой элемент h1, в котором мы отобразим ответ нашего расчета.

В файле JS мы просто слушаем событие нажатия на кнопку отправки, после чего мы фиксируем значения, введенные в поля ввода, и добавляем их вместе после приведения их типа к числам.

Наконец, мы возвращаем сумму этих значений в DOM как textContent элемента h1 с id = "answer"