How to change what the textfields based on what the user inputs?

Question

How to change what the textfields based on what the user inputs?

89 Views Asked by Lara At 04 April 2025 at 14:15

I am new to JavaScript and need to create an acceleration formula calculator. I need to first ask what variable the user would like to solve for in the acceleration formula (a=(v-u)/t) and then change textfields based on what the user inputs.

Here is what I have been working on.

function showInputs() {
      var variable = document.getElementById("variableCal").value;
      
      if (variable === "v") {
        document.getElementById("u-input").style.display = "inline";
        document.getElementById("a-input").style.display = "inline";
        document.getElementById("t-input").style.display = "inline";
      } else if (variable === "u") {
        document.getElementById("v-input").style.display = "inline";
        document.getElementById("a-input").style.display = "inline";
        document.getElementById("t-input").style.display = "inline";
      } else if (variable === "t") {
        document.getElementById("v-input").style.display = "inline";
        document.getElementById("u-input").style.display = "inline";
        document.getElementById("a-input").style.display = "inline";
      }
      else if (variable === "a") {
        document.getElementById("t-input").style.display = "inline";
        document.getElementById("u-input").style.display = "inline";
        document.getElementById("v-input").style.display = "inline";
      }
    }

<html>
<body>
   <h1>Acceleration Calculator</h1>

    <form>
    <label for="variableCal">Choose a variable to solve for:</label>
    <select id="variableCal" onchange="showInputs()">
      <option value="v">v</option>
      <option value="u">u</option>
      <option value="t">t</option>
      <option value="t">a</option>
    </select>
    <br>
    <label for="u" id="u-input" style="display: none;">Value of u:</label>
    <input type="number" id="u" style="display: none;">
    <br>
    <label for="a" id="a-input" style="display: none;">Value of a:</label>
    <input type="number" id="a" style="display: none;">
    <br>
    <label for="t" id="t-input" style="display: none;">Value of t:</label>
    <input type="number" id="t" style="display: none;">
   
    <br>
    <button type="button" onclick="solveEquation()">Solve</button>
  </form>
  <div id="resultCal"></div>
  </body>

Original Q&A

There are 1 best solutions below

**tukool** · Answer 1

You will want to use an 'input' event (something similar to this):

document.addEventListener('input', function (event) {
    if (event.target && event.target.matches('input[type="number"]')) {
        
        // ... calc acceleration values

        document.getElementById("a-input").value = 'new-a-value';
        document.getElementById("v-input").value = 'new-v-value';
        document.getElementById("u-input").value = 'new-u-value';
        document.getElementById("t-input").value = 'new-t-value';
    }
}, false);

This will listen for any input made to any element on the page, but since we add the conditional statement to check the target type ('input[type="text"]' in this case), the listener will ignore inputs made to any other element types. That can be fine tuned if you needed to look at more specific elements.

How to change what the textfields based on what the user inputs?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in TEXTFIELD

Related Questions in ACCELERATION

Trending Questions

Popular # Hahtags

Popular Questions