how to fix my Metric/Imperial unit conversion project in Javascript

Question

i am trying to build a solo project in javascript. I am having trouble to display a function when an number input is submitted.

this is my HTML code

<header>
    <h1>Metric/Imperial unit conversion</h1>
    <form>
      <input type="number" name="input" id="input1">
    <input type="submit" onclick="meterFeet()">
    </form>
</header>
    <main>
      <h3>Length (Meter/Feet)</h3>
      <p class="p-l" id="p-l1" "></p>
      
    </main>

and this is my javascript code

let miucn = document.getElementById("input1");

function meterFeet() {
  document.getElementById("p-l1").textContent =
    miucn +
    " meters = " +
    (miucn * 3.281).toFixed(3) +
    " feet | " +
    miucn +
    " feet =" +
    (miucn / 3.281).toFixed(3) +
    " meters";
} 

Answer 1

I made some small fixes in your code.

1. change input type from submit to button
2. put (document.getElementById("input1").value) inside the function
3. parseInt() the input value

function meterFeet() {
  let miucn = parseInt(document.getElementById("input1").value);
  
  document.getElementById("p-l1").textContent =
    miucn +
    " meters = " +
    (miucn * 3.281).toFixed(3) +
    " feet | " +
    miucn +
    " feet =" +
    (miucn / 3.281).toFixed(3) +
    " meters";
  return false;
} 

<header>
    <h1>Metric/Imperial unit conversion</h1>
    <form>
      <input type="number" name="input" id="input1">
      <input type="button" onclick="meterFeet()" value="Submit">
    </form>
    </header>
    <main>
      <h3>Length (Meter/Feet)</h3>
      <p class="p-l" id="p-l1" "></p>
      
    </main>