syntax error on: theDOMElementWalker example

1

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

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

2

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

3

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

4

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.

5

Hmm…
I know how to do these things:

<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

6

You are in some advanced territory here :stuck_out_tongue:

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.

7

Thanks ,
I am just trying to work thru your:https://www.kirupa.com/html5/traversing_the_dom.htm
Just trying to see what I can discover as I traverse the DOM .
Thanks

8

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! :slight_smile:

9

Thanks for that .
I’ll tinker with it .