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;
<!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>Advertisement
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);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>