function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Wei GuanWei Guan 

Handle Actions with Controllers Check Challenge: The campingListItem Lightning Component doesn't contain a button or its attributes are not set correctly when clicked.

Dear Experts

I got this error:
Challenge Not yet complete... here's what's wrong: 
The campingListItem Lightning Component doesn't contain a button or its attributes are not set correctly when clicked.

Here is my code:
campingListItem.cmp
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <ui:button label="Packed!"
               press="{!c.handleClick}"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
</aura:component>

campingListItemController.js
({
    handleClick: function(component, event, helper) {
        var btnClicked = event.getSource();         // the button
        btnClicked.disabled = true;
        component.set("v.item.Packed__c", "checked");     // update our message
    }
})
Best Answer chosen by Wei Guan
Guiomar Fernández de BobadillaGuiomar Fernández de Bobadilla
Try this:

campingListItem.cmp​ 
<aura:component >

    <aura:attribute name="item" type="Camping_Item__c" />

    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox value="{!v.item.Packed__c}" aura:id="checkPacked" />
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>

    <ui:button label="Packed!" press="{!c.packItem}"/>

</aura:component>

controller.js : 
({
    packItem : function(component, event, helper) {
        var checkbox = component.get("v.item",true);
        checkbox.Packed__c = true;
        component.set("v.item",checkbox);
        event.getSource().set('v.disabled', true);
        
    }
})

 

All Answers

Guiomar Fernández de BobadillaGuiomar Fernández de Bobadilla
Try this:

campingListItem.cmp​ 
<aura:component >

    <aura:attribute name="item" type="Camping_Item__c" />

    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox value="{!v.item.Packed__c}" aura:id="checkPacked" />
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>

    <ui:button label="Packed!" press="{!c.packItem}"/>

</aura:component>

controller.js : 
({
    packItem : function(component, event, helper) {
        var checkbox = component.get("v.item",true);
        checkbox.Packed__c = true;
        component.set("v.item",checkbox);
        event.getSource().set('v.disabled', true);
        
    }
})

 
This was selected as the best answer
Wei GuanWei Guan
Works Great! Thanks!
Rose Marie FosterRose Marie Foster
I got this error "Challenge Not yet complete... here's what's wrong:
The campingListItem JavaScript controller doesn't have a 'packItem' handler function." when I check my code below:

Component: 

<aura:component >

    <aura:attribute name="item" type="Camping_Item__c" required="true"/> 
         
    <p>Name: 
        <ui:outputText value="{!v.item.Name}"/> 
    </p> 
    <p>Price: 
        <ui:outputCurrency value="{!v.item.Price__c}"/> 
    </p> 
    <p>Quantity: 
        <ui:outputNumber value="{!v.item.Quantity__c}"/> 
    </p> 
    <p>Packed: 
        <ui:outputCheckbox value="{!v.item.Packed__c}"/> 
    </p> 
 
     <ui:button label="Packed!" press="{!c.packItem}"/>
    
</aura:component>


CONTROLLER:

({         
    packItem : function(component, event, helper) {
        var checkbox = component.get("v.item",true);
        checkbox.Packed__c = true;
        component.set("v.item",checkbox);
        event.getSource().set('v.disabled', true);
    }
})


What did I miss? Sorry I am new to coding and still learning my way around it. If anyone could help me I would really appreciate it.