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";
}
I made some small fixes in your code.
(document.getElementById("input1").value) inside the functionfunction 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>