I have two input fields and a variable:
var x = 5;
First: <input type="text" name="first">
Second: <input type="text" name="second">
When I input a value in the first input field I want to update and display the second input field value with: first-input-field-value * x
When I input a value in the second input field I want to update and display the first input field value with: x / second-input-field-value
A simple solution would be to implement event handlers that perform the respective arithmetic for each input element. Some things to consider would be:
input event ensure that arthimetic and input updates are peformed immediatly, and for different user interactions (keypress, paste from keyboard, etc)In code this can be written as:
/* Query document for first and second input elements */
const inputFirst = document.querySelector('input[name="first"]');
const inputSecond = document.querySelector('input[name="second"]');
const x = 5;
/*
Add event handler for the input event that will be run when user interaction
with input causes value change
*/
inputFirst.addEventListener("input", (event) => {
/* Obtain current numeric value for this input after user interaction */
const value = Number.parseFloat(event.target.value);
if(!Number.isNaN(value)) {
/*
The value is a number, so we're safe to use it for arithmetic. Here
we update the value of the secondInput from the input event of the
firstInput
*/
inputSecond.value = value * x;
}
});
inputSecond.addEventListener("input", (event) => {
const value = Number.parseFloat(event.target.value);
if(!Number.isNaN(value)) {
inputFirst.value = value / x;
}
});First: <input type="text" name="first">
Second: <input type="text" name="second">