# syntax error on: theDOMElementWalker example

**URL:** <https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189>\
**Category:** Uncategorized\
**Created:** [August 14, 2019, 11:13pm UTC](https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189 "2019-08-14T23:13:01Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [August 14, 2019, 11:13pm UTC](https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189/1 "2019-08-14T23:13:01Z")

</div>

Hello & Thanks:  
I am reviewing your ‘traversing the dom’ article .  
And getting “Uncaught SyntaxError: Unexpected string” .  
On this statement:

```auto
<!DOCTYPE HTML>
<html>
<head>
<style>
 
</style>
</head>

<body>

<h5>Basic-Html-Css-Js-texasRanger.html</h5>

<br>
     <div id="showMe" class="showMeClass">Show Events...</div>
<br>

<div id="texas"></div>

<button onclick="statusreport() ">Show Me EventType</button>
<button onclick='function theDOMElementWalker("texas")'>DOMElementWalker</button>

<script>
var eventtype;
function statusreport() {
eventSrcID=(event.srcElement)?event.srcElement.id:'undefined';
eventtype=event.type;
status=eventSrcID+' has received a '+ eventtype + ' Event.';
document.getElementById("showMe").innerHTML = "Event = " + status;
}
</script>

<script>
function theDOMElementWalker(node) {
    if (node.nodeType == 1) {
 
        console.log(node.tagName);
 
        node = node.firstChild;
 
        while (node) {
            theDOMElementWalker(node);
            node = node.nextSibling;
        }
    }
}
</script>
</body>
</html>
```

Plz , what am I doing wrong ?  
Thanks

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 15, 2019, 5:18pm UTC](https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189/2 "2019-08-15T17:18:22Z")

</div>

For the onclick event handler, you don’t need the word “function”. Try removing that and seeing if it fixes your issue 🙂

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [August 15, 2019, 7:23pm UTC](https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189/3 "2019-08-15T19:23:36Z")

</div>

Ugh , embarrssing;  
When I correct that ,  
there is still no console output ??  
Thanks

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 15, 2019, 8:21pm UTC](https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189/4 "2019-08-15T20:21:53Z")

</div>

What you need to pass in is an actual element, not just the ID as a string. This is how the example is structured:

```
let texasRanger = document.querySelector("#texas");
theDOMElementWalker(texasRanger);

```

You may need your event handler to process the click and then call `theDOMElementWalker` with the actual element.

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [August 15, 2019, 11:05pm UTC](https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189/5 "2019-08-15T23:05:36Z")

</div>

Hmm…  
I know how to do these things:

```auto
<script>
// is there a way to put an onclick event in css
function myFunction(event) { 
  alert("node = " + event.target.nodeName);
  alert("id = " + event.target.idName);
  alert("class = " + event.target.className);
}
</script>
```

Except for ’ event.target.idName ’ which I can’t get working either . (Pls, help also) .  
But I don’t know how to get the actual Node element .  
Pls help .  
Thanks

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 15, 2019, 11:11pm UTC](https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189/6 "2019-08-15T23:11:18Z")

</div>

You are in some advanced territory here 😛

What exactly are you trying to do? Walking through all the elements in a tree is often not needed, so I wonder if there is an easier way to accomplish your goal.

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [August 16, 2019, 5:08am UTC](https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189/7 "2019-08-16T05:08:57Z")

</div>

Thanks ,  
I am just trying to work thru your:[https://www.kirupa.com/html5/traversing\_the\_dom.htm](https://www.kirupa.com/html5/traversing_the_dom.htm)  
Just trying to see what I can discover as I traverse the DOM .  
Thanks

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 16, 2019, 5:59am UTC](https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189/8 "2019-08-16T05:59:15Z")

</div>

This code will print out all the DOM elements that are children of the node you pass in. To see the code at work, make sure you have the DOM walker function defined with the commented out line uncommented:

```
function theDOMElementWalker(node) {
    if (node.ELEMENT_NODE === 1) {

        console.log(node.tagName);

        node = node.firstChild;

        while (node) {
            theDOMElementWalker(node);
            node = node.nextSibling;
        }
    }
}

```

From there, pass it any DOM element that has children. An easy one is document.body, so you can do this:

```
theDOMElementWalker(document.body);

```

Give it a shot! 🙂

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [August 16, 2019, 11:55pm UTC](https://forum.kirupa.com/t/syntax-error-on-thedomelementwalker-example/640189/9 "2019-08-16T23:55:19Z")

</div>

Thanks for that .  
I’ll tinker with it .