0
<template>
    <lightning-card title="*******************HDFC Bank********************" >
        <p><b><u>Fixed Deposit Calculator</u></b></p>

        <lightning-input type="number" label="Enter the Prinipal" onchange={principal}></lightning-input>
        <lightning-input type="number" label="Enter the year of investment" onchange={year}></lightning-input>
        <lightning-input type="number" label="Enter the rate of interest" onchange={interest}></lightning-input> 

       <lightning-button-group>
            <lightning-button label="Calculate" onclick={calculate}></lightning-button>
            <lightning-button label="Clear" onclick={clear}></lightning-button>
        </lightning-button-group>

        <p>   The Maturity amount is = {maturityamount} </p>
    </lightning-card>
    
</template>

this is my JS

import { LightningElement,track} from 'lwc';

export default class HdfcFixedDepositCalculator extends LightningElement {
    principal;
    interest;
    year;
    @track maturityamount;
    principal(event){
        this.principal=parseInt(event.target.value); 
    }
    year(event){
        this.year=parseInt(event.target.value);
    }
    interest(event){
        this.interest=parseInt(event.target.value);
    }
    calculate(){
      this.maturityamount=this.principal*this.interest*this.year/100;

   }
}
2
  • 1
    Hi, thanks for posting your question. Could you please edit it to provide some more clarity, as it's hard to provide any help as it stands. Is this the only component on the page or that is involved in the transaction, as there no reference to apply currently. Also what have you tried so far yourself and what were the results of any investigations you've completed. Commented May 9, 2023 at 4:16
  • You have same names for property and method like principal, year and interest, that is not correct. For the change event handler, rename them to onPrincipalChange() and so on. Then finally you would need to add a null check on calculate() method.
    – Raul
    Commented May 9, 2023 at 8:08

1 Answer 1

1

The issue in the code is that you have defined three methods with the same name as the variables you want to set. The methods that set the variables should have different names. You can change the name of the methods like this:

<template>
    <lightning-card title="*******************HDFC Bank********************" >
        <p><b><u>Fixed Deposit Calculator</u></b></p>

        <lightning-input type="number" label="Enter the Prinipal" onchange={handlePrincipalChange}></lightning-input>
        <lightning-input type="number" label="Enter the year of investment" onchange={handleYearChange}></lightning-input>
        <lightning-input type="number" label="Enter the rate of interest" onchange={handleInterestChange}></lightning-input> 

       <lightning-button-group>
            <lightning-button label="Calculate" onclick={calculate}></lightning-button>
            <lightning-button label="Clear" onclick={clear}></lightning-button>
        </lightning-button-group>

        <p>   The Maturity amount is = {maturityamount} </p>
    </lightning-card>
    
</template>

Js Code

import { LightningElement, track } from 'lwc';

export default class HdfcFixedDepositCalculator extends LightningElement {
    principal;
    interest;
    year;
    @track maturityamount;

    handlePrincipalChange(event) {
        this.principal = parseInt(event.target.value); 
    }

    handleYearChange(event) {
        this.year = parseInt(event.target.value);
    }

    handleInterestChange(event) {
        this.interest = parseInt(event.target.value);
    }

    calculate() {
        this.maturityamount = this.principal * this.interest * this.year / 100;
    }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .