Why does my simple unit converter function display undefined?-CodePudding

I'm learning JS and creating this simple kitchen unit converter as an exercise in function writing. I've written what I think is correct syntax, but when I hit submit, the alert box shows an undefined value:

Screenshot: After clicking submit, the alert box shows undefined instead of the expected value calculated by the function.

Since writing the code, I've spent a few hours reading up on undefined values, function syntax, returns, and similar projects, and haven't found the issue yet. I've used this simple HTML structure (The different unit buttons in the drop-down don't do anything yet, but that's for another time.):

    <body>
      <h1>Kitchen Calculator</h1>
      
      <form action="/script.js">
        <input type="text" id="input-1" name="First Amount">
        
        <div >
          <button >Units</button>
          <div >
            <button>Teaspoon</button>
            <button onclick="">Tablespoon</button>
            <button onclick="">Cup</button>
            <button onclick="">Quart</button>
            <button onclick="">Pint</button>
            <button onclick="">Liter</button>
            <button onclick="">Dash</button>
            <button onclick="">Pinch</button>
          </div>
        </div>
        
        =
        
        <input type="text" id="input-2" name="Second Amount">
        
        <div >
          <button >Units</button>
          <div >
            <button onclick="">Teaspoon</button>
            <button onclick="">Tablespoon</button>
            <button onclick="">Cup</button>
            <button onclick="">Quart</button>
            <button onclick="">Pint</button>
            <button onclick="">Liter</button>
            <button onclick="">Dash</button>
            <button onclick="">Pinch</button>
          </div>
        </div>
        
        <input type="submit" value="Submit" onclick="convertUnits(unit1, unit2)">
    </form>
      <script src="script.js"></script>
    </script> 
    </body>

And here's my JS. I've just created two variables to hold the user input and added them together in an arrow function, so I'm not sure where the mistake is. I'm sure it's a noob sort of mistake though. I'm at that stage in my journey:

    // Select the input element and get its value
    let unit1 = document.getElementById("input-1").value;
    let unit2 = document.getElementById("input-2").value;
    
    let convertUnits = (unit1, unit2) => {
      let conversion = unit1   unit2;
      // Display the value
      alert(conversion.value);
    };

Any help is very much appreciated.

CodePudding user response：

You read the element value when the code is evaluated. You need to read the value when the user clicks the button.

const unit1 = document.getElementById("input-1");
const unit2 = document.getElementById("input-2");

const convertUnits = (evt) => {
  evt.preventDefault();
  const conversion = Number(unit1.value)   Number(unit2.value);
  alert(conversion);
};

document.querySelector('#btnCalc').addEventListener("click", convertUnits);

<input id="input-1" />
<input id="input-2" />
<button type="button" id="btnCalc">Click me</button>

CodePudding user response：

let btn = document.querySelector(".click");
btn.addEventListener("click", function () {
  let unit1 = Number(document.querySelector(".unit1").value);
  let unit2 = Number(document.querySelector(".unit2").value);
  let conversion = unit1   unit2;
  alert(conversion);
});

Blockquote