HTML simple issue - txtUserMessage.value is not set

This is sample code from a book and i know its a simple mistake. But, what is it? Why isn't this code working?

It should print what is in the txtUserMessage.value but instead an error pops up that says txtUserMessage isn't defined.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>This is my simple web page</title>
    <script language="javascript" type="text/javascript">
// <![CDATA[

        function btnShow_onclick() {
            alert(txtUserMessage.value);
        }

// ]]>
    </script>
</head>
<body bgcolor="#ffffcc">
  <!-- Prompt for user input-->
  <h1 align="center">Simple HTML Page</h1>
  <p align="center">
    <br/>
    <i>Please enter a message</i>.
  </p>
<!-- Build a form to get user info -->
<form id="defaultPage">
  <p align="center">
      Your Message:
    <input id="txtUserMessage" type="text"/></p>
  <p align="center">
    <input id="btnShow" type="button" value="Show!" onclick="return btnShow_onclick()" />
    <input id="btnReset" type="reset" value="Reset"/>
  </p>
</form>
</body>
</html>
alexmac05Asked:
Who is Participating?
 
CKY092Connect With a Mentor Commented:
Your reference to the text input id wasn't quite right.

Here's a working version: http://jsfiddle.net/boisebrewer/c2Hfa/
0
 
alexmac05Author Commented:
thank you!
0
 
CKY092Commented:
You're welcome!
0
 
Dave BaldwinFixer of ProblemsCommented:
Try this.  You need to use 'document.getElementById("txtUserMessage")' to identify the element, not just the name or id.  As you wrote it above, alert(txtUserMessage.value) is considered a variable that is not defined, not an element on the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>This is my simple web page</title>
    <script language="javascript" type="text/javascript">
// <![CDATA[

        function btnShow_onclick() {
            alert(document.getElementById("txtUserMessage").value);
        }

// ]]>
    </script>
</head>
<body bgcolor="#ffffcc">
  <!-- Prompt for user input-->
  <h1 align="center">Simple HTML Page</h1>
  <p align="center">
    <br/>
    <i>Please enter a message</i>.
  </p>
<!-- Build a form to get user info -->
<form id="defaultPage">
  <p align="center">
      Your Message:
    <input id="txtUserMessage" type="text"/></p>
  <p align="center">
    <input id="btnShow" type="button" value="Show!" onclick="return btnShow_onclick()" />
    <input id="btnReset" type="reset" value="Reset"/>
  </p>
</form>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.