Let's say I have the following code, and I want to have N1 and N2 equal the inputs of numberInput1 and numberInput2 respectively. How would I do that? Answer This is one way you could do it. It won't create global variables, but if you really need global variables, you can modify to taste.

How to set a variable to the output of a form’s input?

Let’s say I have the following code, and I want to have N1 and N2 equal the inputs of numberInput1 and numberInput2 respectively. How would I do that?

"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;

JavaScript
​x
 
"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>

JavaScript
 
<!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>

Answer

This is one way you could do it. It won’t create global variables, but if you really need global variables, you can modify to taste.

//  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);

JavaScript
 
//  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;
}

JavaScript
 
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>

JavaScript
 
<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>

Advertisement

Answer