unable to get input value from <input>

Question

I can't seem to get the input value for "name", I have tried using .value in JS but when I run the code I get undefined.

HTML code

<div class="col-1">
<label for="fname">Name</label>
</div>
<div class="col-2">
<input type="text" id="fname"  placeholder="Enter name"  required>
</div>

<div class="col-3">
<button  onClick="gather()" id="submitButton">submit</button>
</div

JS code

var submit = document.getElementById("submitButton");
submit.addEventListener("click",gather);

function gather(){
  name = document.getElementById("fname");
  message = "Thank you for subscribing "+name.value+ "!";
  alert(message);
}

Did you try giving the input an empty value parameter? value="" — Daantje
– Daantje, Commented Mar 23, 2021 at 9:24
weird, your code looks correct. what does it say when you log just the input element (name)? — fonzane
– fonzane, Commented Mar 23, 2021 at 9:26

Simone Rossaini · Accepted Answer · 2021-03-23 09:52:06Z

2

Just use var for create variable and all work.

var submit = document.getElementById("submitButton");
submit.addEventListener("click",gather);
function gather(){
  var name = document.getElementById("fname");
  var message = "Thank you for subscribing "+name.value+ "!";
  alert(message);
}

<div class="col-1">
  <label for="fname">Name</label>
</div>
<div class="col-2">
  <input type="text" id="fname"  placeholder="Enter name"  required>
</div>
<div class="col-3">
  <button  onClick="gather()" id="submitButton">submit</button>
</div>

I suggest you to see this post:

Is var necessary when declaring Javascript variables?

edited Mar 23, 2021 at 9:52

answered Mar 23, 2021 at 9:24

Simone Rossaini

8,1461 gold badge15 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhick Dahal · Accepted Answer · 2021-03-23 09:28:52Z

1

you can simply do .value in the same line and get the value of the element

name = document.getElementById("fname").value;
console.log(name)

answered Mar 23, 2021 at 9:28

Abhick Dahal

313 bronze badges

Comments

knowNothing · Accepted Answer · 2021-03-23 09:29:37Z

0

You must put all your codes into window.onload. This method running your code when all elements in page loaded. And this will solve your problem.

window.onload = () => {
//some js codes
}

answered Mar 23, 2021 at 9:29

knowNothing

923 bronze badges

Collectives™ on Stack Overflow

unable to get input value from <input>

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related