function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Louis NguyenLouis Nguyen 

Trailhead: The 'PhoneNumberInput' client-side controller is not setting the phone param

Hi,
I keep getting this error when trying to do a Trailhead Challenge.  Any ideas?  Thanks.
User-added image

Here is my code:
PhoneNumberEvent.evt
<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="phone" type="String"/>
</aura:event>
MyApplication.app
<aura:application >
    ({
	send : function(component, event, helper) {
		var phone = component.find("phone").get("v.value");
        console.log(phone);
        $A.get("event.c:PhoneNumberEvent").setParams({
            phone: phone
       }).fire();
	}
	})
    
    ({
	answer : function(component, event, helper) {
		var text = event.getParam("phone");
        component.set("v.phone", text);
	}
	})

    <c:PhoneNumberInput/>
    <c:PhoneNumberOutput/>
</aura:application>
PhoneNumberInput.cmp
<aura:component >
    <aura:registerEvent name="PhoneNumberEvent" type="c:PhoneNumberEvent"/>
    <ui:inputPhone aura:id="phone" label="phone" />
    <ui:button label="Show Phone" press="{!c.send}"/>
</aura:component>
PhoneNumberOutput.cmp
<aura:component >
    <aura:attribute name="phone" type="String" default="No Phone Number"/>
    <ui:outputText aura:id="phone" value="{!v.phone}"/>
    <aura:handler event="c:PhoneNumberEvent" action="{!c.answer}"/>
</aura:component>
Best Answer chosen by Louis Nguyen
VinojVinoj
Hi Louis,

I believe the JavaScript in your MyApplication.app needs to be placed in the PhoneNumberInputController.js and PhoneNumberOutputController.js controller.  Your app should just have:
<aura:application >
    <c:PhoneNumberInput />
    <c:PhoneNumberOutput />
</aura:application>

Your PhoneNumberInputController.js should have send function.  You can access the controller by selecting it from the nav on the right when the component is open:

User-added image


User-added image

Similarly, your answer function should be placed in the PhoneNumberOutputController.js

All Answers

VinojVinoj
Hi Louis,

I believe the JavaScript in your MyApplication.app needs to be placed in the PhoneNumberInputController.js and PhoneNumberOutputController.js controller.  Your app should just have:
<aura:application >
    <c:PhoneNumberInput />
    <c:PhoneNumberOutput />
</aura:application>

Your PhoneNumberInputController.js should have send function.  You can access the controller by selecting it from the nav on the right when the component is open:

User-added image


User-added image

Similarly, your answer function should be placed in the PhoneNumberOutputController.js
This was selected as the best answer
Louis NguyenLouis Nguyen
Thanks!  That fixed my issue. :)
Jeremy Clegg 8Jeremy Clegg 8
<aura:component>
    <aura:registerEvent name="PhoneNumberEvent" type="c:PhoneNumberEvent" />
    <ui:inputPhone aura:id="phone" label="phone" />
    <ui:button label="Show Phone" />
</aura:component>

Here is the code mentioned above for the Phone Number Input Controller