Расчет на входе

Я начинаю изучать DOM в javascript, и я хотел бы создать программу, которая делает сумму двух чисел, заданных на входе, и показывает ее.

Я хотел бы знать, какие функции мне следует использовать, а какие лучше не использовать.

Это мой (очень простой) HTML-код:

let warp = document.getElementById('warp');
let first = document.getElementById('first').value;
let one = parseInt(first);
let second = document.getElementById('second').value;
let two = parseInt(second);

let res = document.getElementById('res');

//res.addEventListener('click', calcul);
//res.onclick(calcul);

let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);

function calcul(first, second) {
  console.info(one + two);
  event.preventDefault();
}

<!DOCTYPE html>
</head>

<body>
  <div id = "warp">
    <form>
      <input id = "first" type = "number">first number</input>
      <input id = "second" type = "number">second number</input>
      <input id = "res" type = "submit" value = "Envoyer" onclick = "calcul()" />
    </form>
    <div>
</body>

Вам нужно получить входные значения в функции calcul(). Вы устанавливаете эти переменные при первой загрузке страницы, до того, как пользователь что-либо ввел.

— 30.03.2022 17:17

javascript dom frontend

30.03.2022 17:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Это сработает. Вам просто нужно вызвать значения на основе их идентификатора в самой функции calcul().

let warp = document.getElementById('warp');
let res = document.getElementById('res');
let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);

function calcul() {
  let first = document.getElementById('first').value;
  let one = parseInt(first);
  let second = document.getElementById('second').value;
  let two = parseInt(second);
  if (isNaN(one) || isNaN(two)){
    event.preventDefault();
    return
  }
  console.info(one + two);
  event.preventDefault();
}

<!DOCTYPE html>
</head>

<body>
  <div id = "warp">
    <form>
      <input id = "first" type = "number">first number</input>
      <input id = "second" type = "number">second number</input>
      <input id = "res" type = "submit" value = "Envoyer" onclick = "calcul()" />
    </form>
    <div>
</body>

Спасибо за вашу помощь

— 31.03.2022 14:07

30.03.2022 18:06

let answerElemenet = document.createElement("h1");
// You can create a h1 element to display your answer after calculating it
document.body.appendChild(answerElemenet);

// Inside the calculate Function you get the values of input one and two
// and then you store the sum value in a variable and just change your 
// answerElement to have the innerHTML value of the finalSum Variable
function calculate(){
    let valueOne = parseFloat(document.getElementById('first').value);
    let valueTwo = parseFloat(document.getElementById('second').value);

    let finalSum = valueOne + valueTwo;

    answerElemenet.innerHTML = finalSum;
}

Спасибо за вашу помощь

— 31.03.2022 14:07

30.03.2022 19:56

Ответ принят как подходящий

Добро пожаловать в Stackoverflow!

Я скопировал ваш ответ и внес небольшие изменения. Вот краткое описание и объяснение того, что вы могли бы сделать лучше:

Если вы не планируете изменять эти ссылки, используйте const вместо let. Также старайтесь отделять элементы ввода от их значений. Ссылка на ввод, вероятно, не изменится, но их значение наверняка изменится.

const warp = document.getElementById('warp');
const first = document.getElementById('first');
const second = document.getElementById('second');
const res = document.getElementById('res');

При вычислении входных значений вы обычно хотите, чтобы они были как можно более свежими, поэтому вместо сохранения входных значений в самом начале скрипта вы получаете их, когда они вам нужны, в функции calcul().

Вам также потребуется какое-то подтверждение. Здесь мы пытаемся преобразовать ввод в число и установить ноль, если это невозможно:

function calcul() {
  event.preventDefault();
  const one = parseFloat(first.value) || 0;
  const two = parseFloat(second.value) || 0;
  console.info(one + two);
}

Предпочтительный способ добавления обработчиков событий к элементам DOM — использование API событий. Итак, чтобы вызвать функцию calcul(), вы используете строку, которую вы прокомментировали:

res.addEventListener('click', calcul);

Это также означает, что вы должны удалить атрибут onClick из DOM. Кроме того, input не может иметь дочерних элементов:

<input id = "first" type = "number" />
<input id = "second" type = "number" />
<input id = "res" type = "submit" value = "Envoyer"/>

Все вместе выглядит так:

const warp = document.getElementById('warp');
const first = document.getElementById('first');
const second = document.getElementById('second');
const res = document.getElementById('res');

function calcul() {
  event.preventDefault();
  const one = parseFloat(first.value) || 0;
  const two = parseFloat(second.value) || 0;
  console.info(one + two);
}

res.addEventListener('click', calcul);


let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);

<!DOCTYPE html>
</head>

<body>
  <div id = "warp">
    <form>
      <input id = "first" type = "number" />
      <input id = "second" type = "number" />
      <input id = "res" type = "submit" value = "Envoyer"/>
    </form>
    <div>
</body>

Продолжайте в том же духе и никогда не переставайте задавать вопросы!

30.03.2022 21:45