asked on

Track Visual Navigation Menu Changes Using Event Listeners - JS Only

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="https://invest.bank.com/Set/Images/NewAccounts/progress/ts-step-2-on.gif" alt="progress Step 2"></span>
        <span class="title">Account Settings</span><span class="separator"><img src="https://invest.bank.com/Set/Images/NewAccounts/progress/ts-arrow-spacer.gif" alt="arrow spacer"></span>
    </div>
</div>

Open in new window

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="https://invest.bank.com/Set/Images/NewAccounts/progress/ts-step-3-off.gif" alt="progress Step 3"></span>
        <span class="title">Review</span><span class="separator"><img src="https://invest.bank.com/Set/Images/NewAccounts/progress/ts-arrow-spacer.gif" alt="arrow spacer"></span>
    </div>

</div>

Open in new window

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.

Thanks!

leakim971

no idea of how you go from step 2 to step 3 but here how to get the text content from the html of the class title

    // this function return the title of the current step
    function getCurrentTitle() {
        var currentStep = document.querySelector(".progressStep.current");
        var currentTitle = currentStep.querySelector(".title").textContent;
        return currentTitle;
    }

Open in new window

test page here : https://jsfiddle.net/10fjtsun/
we change step after 5s and run the code again to alert the new title

ASKER CERTIFIED SOLUTION

leakim971

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer