Question 200435 in Html Question posted in
Some basic documentation can be found here.

Why is not my user input in HTML webpage taken and stored as a variable data?

Consider the code I have:

var g = document.getElementById("al").value;

function start() {
  document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g);
}
<p id="test2">Output is here:</p>
<form>
  <label for="g">a:</label>
  <input type="number" id="al" name="g" placeholder="Enter a" value="55">
  <button onclick="start()" type="button">Here</button>
</form>

The output I get on clicking the button is string55, whatever the user input is. I want to fix it and replace 55 with user’s actual input. What is the fix then?

Tags:

2

Answers


  1. 0

    You need to grab the value from within the function:

    function start() {
  var g = document.getElementById("al").value;
  document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g);
}
    <p id="test2">Output is here:</p>
<form>
  <label for="g">a:</label>
  <input type="number" id="al" name="g" placeholder="Enter a" value="55">
  <button onclick="start()" type="button">Here</button>
</form>

    PS, using inline HTML on* handlers is considered bad programming habit. It’s hard to debug. JS should be in one place only, instead, use Element.addEventListener()

    const elBtn = document.querySelector("#start");
const elTest = document.querySelector("#test2");
const elG = document.querySelector("[name=g]");

const printGValue = () => {
  const g = elG.value;
  elTest.textContent = typeof(g) + parseFloat(g);
};

// Do on click
elBtn.addEventListener("click", printGValue);
// And on init:
printGValue();
    <form>
  <label>
    a: <input type="number" name="g" placeholder="Enter a" value="55">
  </label>
  <button id="start" type="button">Here</button>
</form>

<p id="test2"></p>
    Login or Signup to reply.
  2. 0

    The following line already gets the user’s input.

    var g = document.getElementById("al").value;

    So console.log(g); will print the user’s input in the web console.

    const g = document.getElementById("al");
const test2 = document.getElementById("test2");

function start() {
  g.addEventListener("input", () => {
    test2.innerHTML = g.value;
  });
}
    <p id="test2">Output is here:</p>
<form>
    <label for="g">a:</label>
    <input type="number" id="al" name="g" placeholder="Enter a" value="55" />
    <button onclick="start()" type="button">Here</button>
</form>

    You always want to use the typeof operator and parseFloat the input, here we go.

    const g = document.getElementById("al");
const test2 = document.getElementById("test2");

function start() {
  g.addEventListener("input", () => {
    test2.innerHTML = typeof(g.value) + parseFloat(g.value);
  });
}
    <p id="test2">Output is here:</p>
<form>
    <label for="g">a:</label>
    <input type="number" id="al" name="g" placeholder="Enter a" value="55" />
    <button onclick="start()" type="button">Here</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search