JavaScript DOM inquiry

Hey all,

I'm just trying to learn some basic DOM manipulation with core javascript. I know how simple it is to do something like this using a library like jQuery or prototype, but for now my interests remain in obtaining results similar to these without them.  In this example, I'm looking over a book and noted how they're uppercasing all letters.  However, I can't get it to work. What kind of node should I be passing to get Node.TEXT_NODE for this to work?

here's my code:

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

<html lang="en">
<head>
      <script type="text/javascript">
      // This function recursively looks at Node n and its descendants,
      // converting all Text node data to uppercase
      function upcase(n) {
          if (n.nodeType == 3 /*Node.TEXT_NODE*/) {
              // If the node is a Text node, change its text to uppercase.
              n.data = n.data.toUpperCase();
          }
          else {
              // If the node is not a Text node, loop through its children
              // and recursively call this function on each child.
              var kids = n.childNodes;
              for(var i = 0; i < kids.length; i++) upcase(kids[i]);
          }
      }
      
      </script>
</head>
<body>
<p id="test">
      This is a test
</p>
<ul>
      <li>This
      <li>Is
      <li>Also
      <li>a
      <li>test
      <br>
      <button onclick="upcase('test')">UpperCase it up!</button>
</body>
</html>
LVL 3
stevefNYCAsked:
Who is Participating?
 
basicinstinctCommented:
call it like this:

<button onclick="upcase(document.body)">UpperCase it up!</button>
0
 
stevefNYCAuthor Commented:
Dang, you know how I tested it at one point. I used:

<button onclick="upcase('document')">UpperCase it up!</button>

Had the right idea, but passing it as a string doesn't work. :-(

Thank you though for the help.
0
 
steveberzinsCommented:
I think you just need to actually get the node, not pass in the string 'test' to your function call.

      <button onclick="upcase(document.getElementById('test'))">UpperCase it up!</button>
0
 
basicinstinctCommented:
no problem - at least you'll never forget it now...
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.