[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

HTML simple issue - txtUserMessage.value is not set

Posted on 2011-10-18
4
Medium Priority
?
285 Views
Last Modified: 2012-06-27
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>
0
Comment
Question by:alexmac05
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
CKY092 earned 2000 total points
ID: 36990090
Your reference to the text input id wasn't quite right.

Here's a working version: http://jsfiddle.net/boisebrewer/c2Hfa/
0
 

Author Closing Comment

by:alexmac05
ID: 36990098
thank you!
0
 
LVL 4

Expert Comment

by:CKY092
ID: 36990100
You're welcome!
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36990103
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question