You need to sign in to do that
Don't have an account?
Shruthi MN 32
VS Code Simple interest calculator error
I have created a SI calculator using Lightning Web Component
but the result is not getting displyed can anyone help me with the same and each time I enter values I am getting below error.
I have reffered this use case from below video
https://www.youtube.com/watch?v=f0OFW2EqZow&list=PLdYQMTciVWO9dJAafGxS1HuZy4wx6AxAW&index=13
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>
JS
import { LightningElement, track } from 'lwc';
export default class Simpleinterstcal extends LightningElement {
@track currentOutput;
principal;
rateofinterest;
numberofyears;
principalChangeHandler (event)
{
this.principal = parseint(event.target.value);
}
timechangehandler (event)
{
this.noOfyears = parseint(event.target.value);
}
ratechangehandler (event)
{
this.noOfyears = parseint(event.target.value);
}
calculateSIHandler (event)
{
this.currentOutput = 'Simple Interest is :' + (this.principal*this.rateofinterest*this.numberofyears)/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>
but the result is not getting displyed can anyone help me with the same and each time I enter values I am getting below error.
I have reffered this use case from below video
https://www.youtube.com/watch?v=f0OFW2EqZow&list=PLdYQMTciVWO9dJAafGxS1HuZy4wx6AxAW&index=13
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>
JS
import { LightningElement, track } from 'lwc';
export default class Simpleinterstcal extends LightningElement {
@track currentOutput;
principal;
rateofinterest;
numberofyears;
principalChangeHandler (event)
{
this.principal = parseint(event.target.value);
}
timechangehandler (event)
{
this.noOfyears = parseint(event.target.value);
}
ratechangehandler (event)
{
this.noOfyears = parseint(event.target.value);
}
calculateSIHandler (event)
{
this.currentOutput = 'Simple Interest is :' + (this.principal*this.rateofinterest*this.numberofyears)/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>
Please try with below JS code:
Hope this helps! Please mark as best if it solves your issue.
Thanks