+ Start a Discussion
Andrew Aldis 15Andrew Aldis 15 

component.find not getting the element

Hello,

I am trying to show and hide a div when a button is clicked. I am trying to pull back a div by the id and it always comes back as undefined.  I have console logged the variable of the id and it works.  Can anyone help me figure this out?


selectRow : function(component, event, helper) {
var device = component.get("v.device");
console.log('device is '+device);
var itemIndex = parseInt(event.target.dataset.value);
helper.selectRow(component, itemIndex);
if(device == 'PHONE'){
var rectarget = event.currentTarget;
console.log('rectarget is '+rectarget);
var accId = rectarget.getAttribute("id");
console.log('id is '+accId);
var div = 'div'+accId;
console.log('div is '+div);
var cmpTarget = component.find(div);
console.log('cmpTarget is '+cmpTarget);
if(cmpTarget == 'show'){
$A.util.addClass(cmpTarget, 'hide');
$A.util.removeClass(cmpTarget, 'show');
} else {
$A.util.addClass(cmpTarget, 'show');
$A.util.removeClass(cmpTarget, 'hide');
}
}
},

<div class="{!v.phoneClass}" id="{!'div'+index}">  
<lightning:tabset class="moveUp">
<lightning:tab>
<aura:set attribute="label">
<span>Available ({!v.availProductCount})</span>
</aura:set>
<div style="padding-right:12px;">
<lightning:spinner aura:id="spinner" alternativeText="Waiting for Product Availability data" />
<ui:scrollerWrapper class="scrollerSize">
<aura:iteration items="{!v.products}" var="product">
<div class="wrapVertical" title="{!product.productName}">
{!product.productName}
</div>
</aura:iteration>
</ui:scrollerWrapper>
</div>
</lightning:tab>
<lightning:tab>
<aura:set attribute="label">
<span>Unavailable ({!v.unavailProductCount})</span>
</aura:set>
<div style="padding-right:12px;">
<lightning:spinner aura:id="spinner" alternativeText="Waiting for Product Availability data" />
<ui:scrollerWrapper class="scrollerSize">
<aura:iteration items="{!v.unavailableProducts}" var="product">
<div class="slds-truncate" title="{!product.productName}">
{!product.productName}
</div>
</aura:iteration>
</ui:scrollerWrapper>
</div>
</lightning:tab>
</lightning:tabset>
</div>