Как установить переменную для вывода ввода формы?

Допустим, у меня есть следующий код, и я хочу, чтобы N1 и N2 были равны входам numberInput1 и numberInput2 соответственно. Как бы я это сделал?

"use strict";
// Alternative formula: MN = (N1 * (N2 - 2)) + (N1 + (N2 - 1))

N1 = numberInput1;
N2 = numberInput2;

// side number
SN = N1 + (N2 - 1);
// inside number
IN = N1 * (N2 - 2);
// multiplied number
MN = IN + SN;
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Multiplication Table Additive Pairs</title>
    <meta name="description" content="calculates the multiplication table's additive pairs">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <form
        action="/Kinda Useful Programs/Text-based/Math-based/Calculations/Calculating Multiplication Table Additive Pairs/index.html"
        method="GET">
        <label for="input number">Please enter a number:</label>
        <input type="text" name="input number 1" id="numberInput1" required>
        <input type="text" name="input number 2" id="numberInput2" required>
        <button type="submit">Submit</button>
    </form>
    <script src="script.js" async defer></script>
</body>

</html>
N1 = parseInt(numberInput1.value). Но вам нужно запустить этот код в прослушивателе событий, который запускается после того, как пользователь введет все значения. Вы запускаете его, когда страница загружена, до того, как пользователь что-либо ввел.
Barmar 23.04.2022 00:34

Вы знаете, почему люди используют strict? Это недопустимый JS, который вы получили в строгом режиме.

code 23.04.2022 01:07

Я вставил это, но это все еще не работает. он возвращает NaN для всех из них. "use strict"; // Alternative formula: MN = (N1 * (N2 - 2)) + (N1 + (N2 - 1)) function createVariables() { const N1 = parseInt(numberInput1.value); const N2 = parseInt(numberInput2.value); // side number const SN = N1 + (N2 - 1); // inside number const IN = N1 * (N2 - 2); // multiplied number const MN = IN + SN; console.log(N1, N2, SN, IN, MN); } document.getElementById("submitButton").addEventListener("su‌​bmit", createVariables());

The Code Challenger 23.04.2022 01:17
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
3
40
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

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

//  DOM nodes to assist proof of concept
const input1   = document.getElementById('numberInput1');
const input2   = document.getElementById('numberInput2');
const output1  = document.querySelector('output[for="numberInput1"]');
const output2  = document.querySelector('output[for="numberInput2"]');
const outputSN = document.querySelector('output#sn');
const outputIN = document.querySelector('output#in');
const outputMN = document.querySelector('output#mn');

//  here is the meat of your logic
const recalculateDerivedValues = () => {
  const N1 = input1.valueAsNumber;
  const N2 = input2.valueAsNumber;
  const IN = N1 * (N2 - 2);
  const SN = N1 + (N2 - 1);
  outputSN.innerText = SN;
  outputIN.innerText = IN;
  outputMN.innerText = IN + SN;
};

//  attach event handlers so values are updated in real time
const watchThenUpdate = (watchedElement, updateElement) => {
  watchedElement.addEventListener('input', ev => {
    updateElement.innerText = ev.target.value;
    recalculateDerivedValues();
  });
};


//  attach event handlers to respective elements
watchThenUpdate(input1, output1);
watchThenUpdate(input2, output2);
output {
  font-size: x-large;
  font-weight: bold;
  display: block;
  font-family: Courier New;
  color: maroon;
}

output::before {
  content: attr(id);
  padding-right: 1em;
  text-transform: uppercase;
}
<form action="#" id="f" name="f">
  <label for="input number">Please enter two numbers:</label>
  <input type="number" name="input number 1" id="numberInput1" required>
  <input type="number" name="input number 2" id="numberInput2" required>
</form>

<output form="f" for="numberInput1" id="N1"></output>
<output form="f" for="numberInput2" id="N2"></output>

<output id="sn"></output>
<output id="in"></output>
<output id="mn"></output>

Другие вопросы по теме