Apex Code Development You need to sign in to do that
Don't have an account?
Shruthi Narsi LWC error
I have written a code to calculate SI . But the result is not getting displayed. Can anyone help me with the code
HTML
<template>
<lightning-card title="Simple Interest Cal"></lightning-card>
<lightning-layout multiple-rows></lightning-layout>
<lightning-layout-item size= "12" padding = "around-medium" > </lightning-layout-item>
<lightning-input type="number" label = "Enter Principle" onchange= {principalChangeHandler}>
</lightning-input>
<lightning-layout-item size= "12" padding = "around-medium" > </lightning-layout-item>
<lightning-input type="numer" label = "Enter No Of Years" onchange= {timechangehandler}>
</lightning-input>
<lightning-layout-item size= "12" padding = "around-medium" > </lightning-layout-item>
<lightning-input type="number" label = "Enter Rate Of Interest" onchange= {ratechangehandler}>
</lightning-input>
<lightning-layout-item size= "12" padding = "around-medium" ></lightning-layout-item>
<lightning-button label= "Calculate SI" icon-position = "centre" onclick= {calculateSIHandler} >
</lightning-button>
<lightning-layout-item size= "12" padding = "around-medium" > </lightning-layout-item>
<lightning-formatted-text value= {currentoutput} ></lightning-formatted-text>
</template>
Json
import { LightningElement, track } from 'lwc';
export default class Simpleinterstcal extends LightningElement {
@track currentOutput;
principal;
rateofinterest;
noOfyears;
principalChangeHandler (event)
{
this.principal = parseInt(event.target.value,10);
}
timechangehandler (event)
{
this.noOfyears = parseInt(event.target.value,10);
}
ratechangehandler (event)
{
this.rateofinterest = 10);
}
calculateSIHandler()
{
this.currentOutput = 'Simple Interest is :' +parseFloat((this.principal*this.rateofinterest*this.noOfyears)/100);
}
}
XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
HTML
<template>
<lightning-card title="Simple Interest Cal"></lightning-card>
<lightning-layout multiple-rows></lightning-layout>
<lightning-layout-item size= "12" padding = "around-medium" > </lightning-layout-item>
<lightning-input type="number" label = "Enter Principle" onchange= {principalChangeHandler}>
</lightning-input>
<lightning-layout-item size= "12" padding = "around-medium" > </lightning-layout-item>
<lightning-input type="numer" label = "Enter No Of Years" onchange= {timechangehandler}>
</lightning-input>
<lightning-layout-item size= "12" padding = "around-medium" > </lightning-layout-item>
<lightning-input type="number" label = "Enter Rate Of Interest" onchange= {ratechangehandler}>
</lightning-input>
<lightning-layout-item size= "12" padding = "around-medium" ></lightning-layout-item>
<lightning-button label= "Calculate SI" icon-position = "centre" onclick= {calculateSIHandler} >
</lightning-button>
<lightning-layout-item size= "12" padding = "around-medium" > </lightning-layout-item>
<lightning-formatted-text value= {currentoutput} ></lightning-formatted-text>
</template>
Json
import { LightningElement, track } from 'lwc';
export default class Simpleinterstcal extends LightningElement {
@track currentOutput;
principal;
rateofinterest;
noOfyears;
principalChangeHandler (event)
{
this.principal = parseInt(event.target.value,10);
}
timechangehandler (event)
{
this.noOfyears = parseInt(event.target.value,10);
}
ratechangehandler (event)
{
this.rateofinterest = 10);
}
calculateSIHandler()
{
this.currentOutput = 'Simple Interest is :' +parseFloat((this.principal*this.rateofinterest*this.noOfyears)/100);
}
}
XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
There are two minor mistakes in your code:
In HTML File, <lightning-formatted-text value= {currentoutput} ></lightning-formatted-text> should be replaced with this <lightning-formatted-text value= {currentOutput} ></lightning-formatted-text> as the variable declared in js file is currentOutput and not currentoutput
In the JS file, this.rateofinterest = 10); should be replaced with this.rateofinterest = parseInt(event.target.value,10) as there is syntax error.
Please make the following adjustments and run the code, it will work.
Thanks,
Abhishek Bansal.
parseInt(event.target.value,10)
and @track
Please find the details below:
parseInt: https://www.w3schools.com/jsref/jsref_parseint.asp
@track decorator
It provides private property. It provides reactive property. This decorator is used to make a private property which helps the template to re-render the component when the property value is changed. If we want to keep the track of the property's value, we can declare it as @track.
If you have got the solution than please close this question by selection one Best Answer so that it will help others in future.
Thanks,
Abhishek Bansal.