asked on

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">

<h1 align="center">Simple HTML Page</h1>
<p align="center">
<br/>
<i>Please enter a message</i>.
</p>

<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>

ASKER CERTIFIED SOLUTION

CKY092

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

alexmac05

ASKER

thank you!

CKY092

You're welcome!

Dave Baldwin

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