1

Hey Salesforce StackExchange!

I am trying to databind inside of a span but it does not work. I am getting an Undefined Result back, but I can also see that the span has rendered out with data from the chrome dev console. This is happening on onclick={handelBadgeSelected}

Could someone please point me in the right direction and tell me what I am doing wrong?

Here is the HTML:

<template for:each={selectedbadges} for:item="selectedbadge">
                            <div key={selectedbadge.Id} class="slds-visual-picker slds-visual-picker_small">
                                <input type="radio" id={selectedbadge.Id} value={selectedbadge.Id} name="options" />
                                <label>
                                    <span data-name={selectedbadge.Name} onclick={handelBadgeSelected}
                                        class="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
                                        <span class="slds-is-selected">
                                            <span class="slds-icon_container">
                                                <img aria-hidden="true" src={selectedbadge.ImageUrl} />
                                            </span>
                                        </span>
                                        <span class="slds-is-not-selected">
                                            <span class="slds-icon_container">
                                                <img aria-hidden="true" src={selectedbadge.ImageUrl} />
                                            </span>
                                        </span>
                                    </span>
                                    <span class="slds-visual-picker__body">
                                        <span class="slds-text-title">{selectedbadge.Name}</span>
                                    </span>
                                </label>
                            </div>
                        </template>

And here is the JS

handelBadgeSelected(event) {
  window.console.log('Selected Badge Info:',  event.target.dataset.name);
}

The Error: The Error

4
  • 1
    Why are you using window.console.log? The window object acts differently in LWC vs regular JS. You should just use console.log.
    – Arthlete
    Aug 20, 2020 at 16:03
  • I built your code in a LWC Playground and it works as expected. I wish I could share it but it appears that SF took that functionality away. What is the exact error that you are getting?
    – Arthlete
    Aug 20, 2020 at 16:09
  • It just is undefined whenever it consoles.logs I added a screenshot and will add some extra data just to see if it helps.
    – scarecrow
    Aug 20, 2020 at 16:17
  • I believe the main reason I was using window.console.log was that before it would actually throw errors in vscode before.
    – scarecrow
    Aug 20, 2020 at 16:20

1 Answer 1

3

I am not completely certain but I believe your problem is coming from the fact that you have a few nested elements. Let's take a look:

<span data-name={selectedbadge.Name} onclick={handelBadgeSelected}
                                        class="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
                                        <span class="slds-is-selected">
                                            <span class="slds-icon_container">
                                                <img aria-hidden="true" src={selectedbadge.ImageUrl} />
                                            </span>
                                        </span>
                                        <span class="slds-is-not-selected">
                                            <span class="slds-icon_container">
                                                <img aria-hidden="true" src={selectedbadge.ImageUrl} />
                                            </span>
                                        </span>
                                    </span>

In this example you have the parent span <span data-name={selectedbadge.Name} onclick={handelBadgeSelected}. However inside of it you have a few other spans and img tags. So when you click on the parent span you are probably actually clicking on one of the children and then the event propagates to the parent span. However the event is coming from the child which doesn't have a data-name attribute.

The way to solve this is to either:

  1. Put data-name={selectedbadge.Name} on all children OR
  2. To use the css property pointer-events: none; on the children so you can control where the event triggers from.

You must log in to answer this question.

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