Writing a javascript variable from user input to the document

This seems like it should be relatively straightforward, I cannot figure out what I'm doing wrong. I need to take input (user's name) from the user via textbox, set it as a variable, and display it on the page. I keep getting "undefined" instead of the user's name.

Here's a condensed version. This will display a Div that covers the entire page which contains an input for the user to type their name. when the user hits submit the div disappears and the name is set to a variable. I left the form handling functions in case they are relevant to the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">  
<HTML>
<HEAD>
<TITLE>HOME</TITLE>



</HEAD>
<BODY>
<CENTER>
<BR />
<FONT COLOR="RED" FACE="ARIAL BOLD" SIZE="5">test</FONT>
<BR />


<script language="javascript"> 
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var name = uservariable;

function setName(){

    uservariable = document.forms["username"]["user"].value;

    var ele = document.getElementById("nameInput");
    if(ele.style.display == "none") {
            ele.style.display = "block";
    }
    else {
        ele.style.display = "none";
    }
    document.getElementById('element_7').value = uservariable;

} 

function validateForm()
{
var x=document.forms["username"]["user"].value;
if (x==null || x=="")
  {
  alert("Rembrandt's first name was Beauregard, what is yours?");
  }
else
  {
  setName()
  } 
}

</script>


<DIV id="nameInput" STYLE="background-color:#ccc;position:fixed;width:100%;height:100%;top:0px;left:0px;z-index:1000;display:block;">

<br /><br /><FONT FACE="ARIAL BOLD" SIZE="3">First Name:</font><br />


<form name="username" action="javascript:validateForm()">
<input type="text" name="user" value="" size="20"><br>
<input type="submit" value="Start Shift">
</form> 
</div>


<script language="javascript"> 
document.write(name + "s LEADS SUBMITTED FOR " + month + "/" + day + "/" + year + ":</B>");
</script>
</center></td></tr></table>
</div>



</CENTER>
</BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">  
<HTML>
<HEAD>
<TITLE>HOME</TITLE>



</HEAD>
<BODY>
<CENTER>
<BR />
<FONT COLOR="RED" FACE="ARIAL BOLD" SIZE="5">test</FONT>
<BR />


<script language="javascript"> 
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var name = uservariable;

function setName(){

    uservariable = document.forms["username"]["user"].value;

    var ele = document.getElementById("nameInput");
    if(ele.style.display == "none") {
            ele.style.display = "block";
    }
    else {
        ele.style.display = "none";
    }
    document.getElementById('element_7').value = uservariable;

} 

function validateForm()
{
var x=document.forms["username"]["user"].value;
if (x==null || x=="")
  {
  alert("Rembrandt's first name was Beauregard, what is yours?");
  }
else
  {
  setName()
  } 
}

</script>


<DIV id="nameInput" STYLE="background-color:#ccc;position:fixed;width:100%;height:100%;top:0px;left:0px;z-index:1000;display:block;">

<br /><br /><FONT FACE="ARIAL BOLD" SIZE="3">First Name:</font><br />


<form name="username" action="javascript:validateForm()">
<input type="text" name="user" value="" size="20"><br>
<input type="submit" value="Start Shift">
</form> 
</div>


<script language="javascript"> 
document.write(name + "s LEADS SUBMITTED FOR " + month + "/" + day + "/" + year + ":</B>");
</script>
</center></td></tr></table>
</div>



</CENTER>
</BODY>
</HTML>

Share Improve this question asked Jun 15, 2012 at 4:04 I wrestled a bear once. 23.4k20 gold badges72 silver badges122 bronze badges

The document.write call happens when the page first loads. name is only assigned to uservariable, which is undefined at that time. You should really step through the code with a proper debugger. – Matt Ball Commented Jun 15, 2012 at 4:09
@MattBall Look at you with a normal ASCII name. – Dave Newton Commented Jun 15, 2012 at 4:10

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

<head>
  <script>

      function doStuff()
      {
        var nameElement = document.getElementById("someInput");
        var theName = nameElement.value;
        document.getElementById("someDiv").innerHTML += theName;
      }

  </script>
</head>

<html>

  <div id="someDiv">
    Hello
  </div>

  <br><br>

  <input id="someInput" type="text">
  <input type="button" value="Say Hello" onClick="doStuff()">

  <br>    
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Writing a javascript variable from user input to the document - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)