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
Jennifer W. LeeJennifer W. Lee 

Javascript Lightning Trailhead Challenge - non developer needs help

I'm not a developer so I'm really trying to work through this challenge and can't figure this out.

I am getting the following error: The client side controller does not have a 'calculate' method when trying to figure out the Using Javascript with Components Lightning Trailhead module.

Here is the challenge:

Your company needs an interface that shows a calculation based on three inputs. The correct value must be the addition of the first two inputs and subtraction of the third. Create a form and client side controller to calculate the total.The component must be named 'CalculateTotal'.

-The component should have three aura:inputNumber components with ID's 'inputOne', 'inputTwo', and 'inputThree'.
-The total must be displayed using a aura:outputNumber component with the ID 'totalValue'
-The client-side controller must do the calculation in a method named 'calculate'.
-The client-side controller can use the standard JavaScript function parseInt to enforce the data type.
-The component must invoke the 'calculate' method on the client-side controller to perform the calculation.

Here is my component:
<aura:component >
<form>
    <fieldset>
    Enter three values:<br/>
    <ui:inputNumber aura:Id="inputOne" value="{!v.inputOne}"/><br/>
    <ui:inputNumber aura:Id="inputTwo" value="{!v.inputTwo}"/><br/>
    <ui:inputNumber aura:Id="inputThree" value="{!v.inputThree}"/><br/>
    <ui:button label="Submit" press="{!c.calculate}"/><br/>
    <ui:outputNumber aura:id="totalValue" value="{!v.totalValue}"/><br/>
    </fieldset>
</form>
</aura:component>

Here is my controller: 
({

    calculate: function(component, item, callback) {
        component.find("inputOne").get("v.inputOne");
        component.find("inputTwo").get("v.inputTwo");
        component.find("inputThree").get("v.inputThree");
        var action = component.get("c.calculateTotal");
        var this.totalValue = InputOne + InputTwo -InputThree;
        
        InputOne = parseInt({!v.InputOne});
        InputTwo = parseInt({!v.InputTwo});
        InputThree = parseInt({!v.InputThree});

        action.setCallback(this,function(a) {
            component.set("v.totalValue",a.getReturnValue());
        });
        $A.enqueueAction(action);
    },
})
}


 
Best Answer chosen by Jennifer W. Lee
Himanshu ParasharHimanshu Parashar
Hi Jennifer,

I have recently cleared this module and following code worked for me so please go through this and compare it with your code.

Component 
<aura:component implements="force:appHostable">
    <form>
    <fieldset>
    Enter three values:<br/>
	<ui:inputNumber aura:id="inputOne" label="Input One" /><br/>
    <ui:inputNumber aura:id="inputTwo" label="Input Two"/><br/>
    <ui:inputNumber aura:id="inputThree" label="Input Three"/><br/>
    <ui:button label="Calculate value" press="{!c.calculate}"/><br/>
        
    <ui:outputNumber aura:id="totalValue" value=""/>
   </fieldset>
</form>
</aura:component>

Controller
  
({
	calculate : function(component, event, helper) {
        var input1=component.find("inputOne").get("v.value");
        var input2=component.find("inputTwo").get("v.value");
        var input3=component.find("inputThree").get("v.value");
        var totalval=parseInt(input1)+parseInt(input2)-parseInt(input3);
        var outputval = component.find("totalValue");
        outputval.set("v.value", totalval);
    }
})



Thanks,
Himanshu
Salesforce Certified Developer | Administrator | Service Cloud Consultant

P.S.  If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.

All Answers

Himanshu ParasharHimanshu Parashar
Hi Jennifer,

I have recently cleared this module and following code worked for me so please go through this and compare it with your code.

Component 
<aura:component implements="force:appHostable">
    <form>
    <fieldset>
    Enter three values:<br/>
	<ui:inputNumber aura:id="inputOne" label="Input One" /><br/>
    <ui:inputNumber aura:id="inputTwo" label="Input Two"/><br/>
    <ui:inputNumber aura:id="inputThree" label="Input Three"/><br/>
    <ui:button label="Calculate value" press="{!c.calculate}"/><br/>
        
    <ui:outputNumber aura:id="totalValue" value=""/>
   </fieldset>
</form>
</aura:component>

Controller
  
({
	calculate : function(component, event, helper) {
        var input1=component.find("inputOne").get("v.value");
        var input2=component.find("inputTwo").get("v.value");
        var input3=component.find("inputThree").get("v.value");
        var totalval=parseInt(input1)+parseInt(input2)-parseInt(input3);
        var outputval = component.find("totalValue");
        outputval.set("v.value", totalval);
    }
})



Thanks,
Himanshu
Salesforce Certified Developer | Administrator | Service Cloud Consultant

P.S.  If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.
This was selected as the best answer
Jennifer W. LeeJennifer W. Lee
This is so weird. I'm still getting that error when I copy and paste your code into the component and controller. I was pretty sure it would have fixed it.
Jennifer W. LeeJennifer W. Lee
I ended up creating a new developer org and redoing this to see if it passes and it does. Thank you.
Jayamaruthyraman JaganathJayamaruthyraman Jaganath
The code sample for error handling in the trailhead was not working for me. So I added some error handling logic using the latest implementation.

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>
Controller:
  
({
     handleError: function(component, event){
 			console.log('an error occured');
         	alert('an error occured');
	 },
	calculate : function(component, event, helper) {
        component.find('totalValue').set('v.value', "");
        
        var inputCmp1 = component.find('inputOne');
        var inputCmp2 = component.find('inputTwo');
        var inputCmp3 = component.find('inputThree');
        
		var input1 = parseInt(inputCmp1.get('v.value'));
        var input2 = parseInt(inputCmp2.get('v.value'));
        var input3 = parseInt(inputCmp3.get('v.value'));
        
        //clear the errors
        inputCmp1.set("v.errors", null);
        inputCmp2.set("v.errors", null);
        inputCmp3.set("v.errors", null); 
        
        // error checking
        if (isNaN(input1)) {
            inputCmp1.setValid("v.value", false); 
            
            var errorEvent = inputCmp1.getEvent("onError");
            errorEvent.setParams({ "errors" : [{message:"Input not a number: " + inputCmp1.get('v.value') }]});
            errorEvent.fire();

        } 
        if (isNaN(input2))
        {
            inputCmp2.setValid("v.value", false); 
            
            var errorEvent = inputCmp2.getEvent("onError");
            errorEvent.setParams({ "errors" : [{message:"Input not a number: " + inputCmp2.get('v.value') }]});
            errorEvent.fire();
        }
         
        if (isNaN(input3))
        {
            inputCmp3.setValid("v.value", false); 
            
            var errorEvent = inputCmp3.getEvent("onError");
            errorEvent.setParams({ "errors" : [{message:"Input not a number: " + inputCmp3.get('v.value') }]});
            errorEvent.fire();
        }
        
        if(!isNaN(input1) && !isNaN(input2) && !isNaN(input3))
        {
            var totalVal = input1 + input2 - input3;
        	component.find('totalValue').set('v.value', totalVal);
            }
	}
})