1

On an html page, I want to dynamically draw elements and I want to determine the data-id the nearest element li that contains the clicked element a, and then add a class to the element with the li with data-id so that the element is highlighted as active:

<form onclick={handleClickVerticalNavigation}>
<nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-nav-vertical__section">
        <h2 id="entity-header" class="slds-nav-vertical__title">Months</h2>
        <div for:each={listMonth} for:item="month" key={month.Id}>
            <ul aria-describedby="entity-header">
            <li class="slds-nav-vertical__item" id={month.Id} data-id={month.Id}>
                <a href="#" class="slds-nav-vertical__action" aria-current="false">{month.nameMonth}
                <span class="slds-badge slds-col_bump-left">
                    <span class="slds-assistive-text">:</span>{month.countAmount}
                    <span class="slds-assistive-text">New Items</span>
                </span>
                <span class="slds-badge slds-col_bump-left">
                    <span class="slds-assistive-text">:</span>{month.countIncome}
                    <span class="slds-assistive-text">New Items</span>
                </span>
                </a>
            </li>
            </ul>
        </div>
    </div>
</nav>
</form>

enter image description here

the transmitted listMonth looks like this:

[{"Id":"0-January","nameMonth":"January","countAmount":0,"countIncome":0},{"Id":"1-February","nameMonth":"February","countAmount":0,"countIncome":0},{"Id":"2-March","nameMonth":"March","countAmount":0,"countIncome":0},{"Id":"3-April","nameMonth":"April","countAmount":0,"countIncome":0},{"Id":"4-May","nameMonth":"May","countAmount":0,"countIncome":0}]

I have experimented a lot with the handler method, and this is how it looks now:

handleClickVerticalNavigation(event){
    let returnTarget = event.target;
    if (returnTarget.tagName != 'li'){
        let returnId = event.target.id;
        this.template.querySelector(returnId).className='slds-is-active';
    } else {
        console.log('click not on li');
    }
}

I get into the if block and nothing else happens, because I don't get the id and the class can't be set either...

I have seen this question and some others, but have not solved my problem...

0

1 Answer 1

2

Your click event will capture the A anchor tag, so you will have to navigate back to li tag and then get the id.

like this : e.target.closest('li').id

Your click event navigate to closest parent li tag and get the id, as the html has id on li tag.

<li class="slds-nav-vertical__item" id={month.Id} data-id={month.Id}>

UPDATE

You can use queryselector like this:

let returnId = event.target.closest('li').getAttribute('data-id');
this.template.querySelector('li[data-id="'+returnId+'"]').classList.add('slds-is-active')
5
  • Thank you very much! Now I get the id, only for some reason it is slightly changed... For example, instead of 0-January, I get 0-January-45. -45 is always added to each id. Commented Jul 16, 2021 at 14:45
  • @Nagedra I decided to get the date-id and now I get the correct value.: let returnDateId = event.target.closest('li').getAttribute('date-id');. But there is a problem with installing the class. That's how I'm trying to install it: this.template.querySelector('li[date-id="${returnDateId}"]').className='slds-is-active';. And I can't do it... Commented Jul 16, 2021 at 15:26
  • @uniqueuser Updated the code. Commented Jul 16, 2021 at 17:05
  • @unique user, id's are changed on runtime, you should never set or use id's to access the DOM using querySelectors, us a custom attribute instead
    – glls
    Commented Jul 16, 2021 at 17:13
  • @Nagedra Singh, thank you so much for your help! This solved my problem. Commented Jul 17, 2021 at 17:18

Not the answer you're looking for? Browse other questions tagged .