制作姓名和年龄输入警报器

Question

basically I am trying to make a form so that sends the user an alert when you press the button with their name and age, my code is below and I have also been doing this on my website: http://js.blazedpanda.com/

var x=document.getElementById("name").value;
var y=document.getElementById("age").value;

function nameAge()
{
alert("Hello"+" "+x+" "+"who is"+" "+y);
}

If you could come up with a solution for this please help, this is probably really basic but I can't find a simple tutorial anywhere. Thanks, Peter.

Edit:

Thanks will have it fixed now, nice and quick responses :P

Answer 1

Put first lines inside your function , like this:

function nameAge()
{
  var x=document.getElementById("name").value;
  var y=document.getElementById("age").value;
  alert("Hello"+" "+x+" "+"who is"+" "+y);
}

Because you want to get current values , so do it when user actually press the button. When you define x and y variables outside of function they are assigned with undefined because of name and age elements are not exist yet.

Answer 2

Looking at the page you linked, your error lies in the fact that you are defining x and y before the <input> elements are loaded. Thus, you receive an error. You want to encapsulate these within the function nameAge()

Answer 3

If you dont know Jquery yet, do this

<input type="text" id="name" />
<input type="text" id="age" /> 

    function nameAge()
    {
    var x=document.getElementById("name").value;
    var y=document.getElementById("age").value;

    alert("Hello"+" "+x+" "+"who is"+" "+y);
    }

If you put it inside, it will update whenever you click the bottom.

Answer 4

You just need to check the values of the name and age inside the function:

function nameAge()
{
   var x=document.getElementById("name").value;
   var y=document.getElementById("age").value;
   alert("Hello "+x+" who is "+y);
 }

And then just call the "onclick" event on the element you want to click

<button name="myButton" onclick="javascript:nameAge();" />