html javascript variable from text input null

Question

So basically I'm trying to get a name that is entered in a text input box in the body to show in an alert in script but it always displays the name as null or if I put .value on the end of the document.getElementById("name") it doesn't display anything. I'm confused because in all the tutorials I've seen it always says to just do it like I did it...

Here's the code I was using:

<!DOCTYPE html>
<html>
<script>
var name = document.getElementById("name");
function showName()
{
alert ("Your name: " + name)
}
</script>
<body>
<form name = "form">
Please enter your full name <input type = "text" id = "name"><br>
<input type = "button" value = "show name" onclick = "showName()">
</form>
</body>
</html>

Thanks for all the prompt and clear explanations everyone :D looks like I just needed to put the name variable in the function because otherwise it would set the variable as soon as the page loaded which would be blank. Thanks again. — Toby Beisly, May 19 '16 at 03:22

score 0 · Answer 1 · answered May 19 '16 at 01:28

Try this

<!DOCTYPE html>
<html>
<body>
<form name = "form">
Please enter your full name <input type="text" id="name" value=""><br>
<input type = "button" value="show name" onclick="showName()">
</form>
<script>
function showName() {
  var name = document.getElementById("name").value;
  alert ("Your name: " + name);
}
</script>
</body>
</html>

Christopher Díaz · Accepted Answer · 2016-05-19T01:49:13.683

You need to do some adjustments to your code:

<!DOCTYPE html>
<html>
<body>
     <form name = "form">
          Please enter your full name <input type = "text" id = "name"><br>
          <input type = "button" value = "show name" onclick = "showName()">
     </form>

<script>

    function showName()
    {
         var name = document.getElementById("name");
         alert ("Your name: " + name.value);
    }
</script>
</body>
</html>

First: Put your function to end of your html code to ensure that you can read the element "name".

Second: You need to get the element just when the user clicks on the button, if you get the element before you can't get the value if this exists.

Third: When you get the element, you are getting an object, in order to get the value, you need to call the property value of this object.

Fourth: Always validate if your variables have content or exist.

score 0 · Answer 3 · answered May 19 '16 at 01:32

0

function showName()
{
var name = document.getElementById("name");
alert ("Your name: " + name.value);
}

Something like this.

answered May 19 '16 at 01:32

Alex Kudryashev

8,484
3
24
31

score 0 · Answer 4 · answered May 19 '16 at 01:33

You need to .value because you want input value and also move your get id name into your function .Because your getting id is outside of function so it will always return undefined coz of initial state value is nothing..

<script>    
function showName()
{
var name = document.getElementById("name");
alert ("Your name: " + name.value);
}
</script>

score 0 · Answer 5 · answered May 19 '16 at 01:40

0

You need to put your variable declaration var name = document.getElementById("name"); inside your function function showName() so when your variable gets the value the real value is assigned.

check this fiddle

hope it helps

answered May 19 '16 at 01:40

Eduardo Portal Geroy

165
1
6

score 0 · Answer 6 · answered May 19 '16 at 01:43

0

Instead of

var name = document.getElementById("name");

use

var name = document.getElementById("name").value;
alert('Your name: ' + name);

Hope this helps !

answered May 19 '16 at 01:43

Sami

3,096
3
13
24

html javascript variable from text input null

6 Answers6