troubleshooting Question

Track Visual Navigation Menu Changes Using Event Listeners - JS Only

Avatar of MJ
MJFlag for United States of America asked on
Web DevelopmentJavaScript* HTML 5jQuery
2 Comments1 Solution7 ViewsLast Modified:
I need to track a visual navigation using JS only (No jQuery please)  and event listeners. I need to capture on a SPA the actual title (e.g. Account Settings in this example) and also when the step changes. So below the code shows class of "progressStep current" , title of "Account Settings". I want "Account Settings"  returned. Below is an example of the step 2 on-state.
<div class="progressStep current">
    <div class="stepIcon">
        <span class="image"><img src="" alt="progress Step 2"></span>
        <span class="title">Account Settings</span><span class="separator"><img src="" alt="arrow spacer"></span>
Below is an example of the visual navigation for step 3 in the off-state (next inline of the above example), class of "progressStep" for comparison
<div class="progressStep ">
    <div class="stepIcon">
        <span class="image"><img src="" alt="progress Step 3"></span>
        <span class="title">Review</span><span class="separator"><img src="" alt="arrow spacer"></span>

So I want to grab the title as the SPA progresses. No Xpath and IE 11 compatible. My code is injected via a TMS so I can't change any mark-up on the page hence the need for event listeners.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros