This is probably a simple question but I’m not finding anything in my searches and I’m a JavaScript beginner. Maybe I’m not getting the exact clue for my answer I would like to make a calculator for calculation HRA exemption with the following conditions: • Actual HRA received from an employer • For those living in metro cities: 50% of (Basic salary + Dearness allowance) For those living in non-metro cities: 40% of (Basic salary + Dearness allowance)
I have made calculator but stuck up at select option i.e. yes/no as for both options the conditions are different I have searched so many articles in google but could not get the correct solutions, either I may not understand properly if anybody can help me will be appreciated from my heart. Thanks in advance.
This is my code `
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title> HRA Exemption Form</title>
</head>
<body>
<h1 > HRA Exemption Calculator</h1>
<div class="container bg-success text-white">
<div class="row">
<div class="col-sm-6">
<form>
<h3> HRA Input data</h3>
<form class="container">
<div class="row">
<div class="col">
<label for="formGroupExampleInput"> Basic Salary received p.m</label>
<input type="text" class="form-control" id="one" placeholder="Basic salary received">
</div>
<div class="col">
<label for="formGroupExampleInput"> Dearness Allowance received</label>
<input type="text" class="form-control" id="two" placeholder="Dearness Allownace">
</div>
</div>
<div class="row">
<div class="col">
<label for="formGroupExampleInput"> HRA received</label>
<input type="number" class="form-control" id="HRA" placeholder="HRA received">
</div>
<div class="col">
<label for="formGroupExampleInput"> Total rent paid</label>
<input type="text" class="form-control" id="TRP" placeholder="Total rent paid ">
</div>
</div>
</form>
<form name="forms"
onsubmit ="return myfun()" >
<div class="col mt-3">
<p> Do you live in metros like Mumbai, Delhi, Kolkatta ?</p>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="livingstatus" id="inlineRadio1"
value="Yes">
<label class="form-check-label" for="inlineRadio1">Yes</label>
</div>
<div class="form-check form-check-inline mt-3">
<input class="form-check-input" type="radio" name="livingstatus" id="inlineRadio2"
value="No">
<label class="form-check-label" for="inlineRadio2">No</label>
</div>
<div class="row justify-content-center mt-3" >
<div class="col-4">
<button type="button" class="btn btn-warning" onclick="calculate()"> Calculate
Now</button>
</div>
</div>
</form>
<p id="result" > </p>
<p id="result1"> </p>
<p id="result2" ></p>
</div>
<script>
function calculate(){
var y = document.getElementById('result');
var x = document.getElementById('result1');
var a = document.getElementById("one").value;
var b = document.getElementById("two").value;
var e = document.getElementById('result2');
y.innerHTML = a*12;
x.innerHTML = b*12;
e.innerHTML = 0.5*(+a + +b);
}
</script>
</body>
</html>`
Aucun commentaire:
Enregistrer un commentaire