Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
cloudmaniacloudmania 

"Using JavaScript Controllers with Components" Lightining Trailhead Challenge - Need Help

Hello , I was trying to complete all challenge about lightining, i was able to pass all of them except "Using Javascript Controller with Components" challenge. I was not able to figure out why trailhead gives the  error below  :

User-added image

Here is my component :
  
<aura:component > 

    <ui:inputNumber aura:id="inputOne" onError='{!c.handleError}' /> <br />
    <ui:inputNumber aura:id="inputTwo" onError='{!c.handleError}' /> <br/> 
    <ui:inputNumber aura:id="inputThree" onError='{!c.handleError}' /> <br/>
       
    <ui:outputNumber aura:id="totalValue" value="" /><br/>
	 <ui:button label="Calculate"  press="{!c.calculate}"/>  
    
</aura:component>

and here is my js controler :
  
({
	calculate : function(component, event, helper) {
		var inputFirst = component.find("inputOne").get("v.value");
        var inputSecond = component.find("inputTwo").get("v.value");
        var inputThird = component.find("inputThree").get("v.value");
        var total = parseInt(inputFirst) + parseInt(inputSecond) - parseInt(inputThird);
        component.find("totalValue").set("v.value",total);
	}
})

Thanks.

 
Łukasz BieniawskiŁukasz Bieniawski
Hi,

Strange indeed - looks good.
Please find my code below - I completed this challenge using this:

Component: 
<aura:component implements="force:appHostable">
    <ui:inputNumber label="inputOne" aura:id="inputOne"/><br/>
    <ui:inputNumber label="inputTwo" aura:id="inputTwo"/><br/>
    <ui:inputNumber label="inputThree" aura:id="inputThree"/><br/>
    <ui:outputNumber aura:id="totalValue" value=""/><br/>
    <ui:button label="calculate" press="{!c.calculate}"/>
</aura:component>

Controller: 
({
	calculate : function(component, event, helper) {
        var inputOne = component.find("inputOne");
        var inputTwo = component.find("inputTwo");
        var inputThree = component.find("inputThree");
        
        var valueOne = inputOne.get("v.value");
        var valueTwo = inputTwo.get("v.value");
        var valueThree = inputThree.get("v.value");
        
        var hasErrors = false;
        
        if (isNaN(valueOne)){
            inputOne.set("v.errors", [{message:"Input is not a number: " + valueOne}]);
            hasErrors = true;
        } else {
            inputOne.set("v.errors", null);
        }
        if (isNaN(valueTwo)){
            inputTwo.set("v.errors", [{message:"Input is not a number: " + valueTwo}]);
            hasErrors = true;
        } else {
            inputTwo.set("v.errors", null);
        }
        if (isNaN(valueThree)){
            inputThree.set("v.errors", [{message:"Input is not a number: " + valueThree}]);
            hasErrors = true;
        } else {
            inputThree.set("v.errors", null);
        }
        
        if (hasErrors == false){
            var sum = parseInt(valueOne) + parseInt(valueTwo) + parseInt(valueThree);
            component.find("totalValue").set("v.value", sum);
        } else {
            component.find("totalValue").set("v.value", 0);
        }
	}
})

Hope this helps.
Lukasz
 
Łukasz BieniawskiŁukasz Bieniawski
Meybe I found the reason:

Line 6: 
var total = parseInt(inputFirst) + parseInt(inputSecond) - parseInt(inputThird);

Replace with (It must be sum): 
var total = parseInt(inputFirst) + parseInt(inputSecond) + parseInt(inputThird);

Regards,
Lukasz
 
cloudmaniacloudmania
I did a copy paste from your code but im still getting same error. Very strange. Thanks for your reply.
cloudmaniacloudmania
I was able to accomplish the challenge just by re-creating "CalculateTotal" component with exactly same cod base. It is very weird. But only difference between , i just noticed that the component that previously created has "DOCUMENTATION" module which i created by mistake. Im not sure but it may be the reason. Anyway it is done.Thanks