javascript - 如何使用 JavaScript 为不同的选项创建两个不同的计算。?
问题描述
这可能是一个简单的问题,但我在搜索中没有找到任何东西,而且我是 JavaScript 初学者。也许我没有得到答案的确切线索 我想做一个计算器来计算 HRA 豁免,条件如下: • 从雇主那里收到的实际 HRA • 对于住在大城市的人:(基本工资 +亲人津贴)对于居住在非大城市的人:(基本工资+亲人津贴)的40%
我做了计算器,但坚持选择选项,即是/否,因为这两个选项条件不同我在谷歌搜索了很多文章但无法获得正确的解决方案,如果有人可以帮助我,我可能无法正确理解发自内心的感激。提前致谢。
这是我的代码`
<!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>`
解决方案
您可以选择两个输入,然后根据选中哪一个来计算答案,或者如果没有选中则显示错误消息。
<!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 opt = document.querySelectorAll(".form-check-inline input");
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;
if (opt[0].checked) {
// Lives in metros
e.innerHTML = 0.5 * (+a + +b);
} else if (opt[1].checked) {
// Doesn't live in metros
e.innerHTML = 0.4 * (+a + +b);
} else {
// If neither of them are checked
e.innerHTML = "Insert default value here";
}
}
</script>
</body>
</html>
推荐阅读
- css - 特定像素下的 HTML CSS 响应式 div
- windows - 创建文件并批量发送到多个文件夹?
- r - 无梯度的约束优化
- python-3.x - 带有 NetworkX 包的 Python 3.x 中的 PCB 布线/管道布线问题/nPairs of disjoint shortest-paths
- scala - 从命令行编译/打包多个配置 sbt scala
- java - 我无法使用 javaDB 将新数据插入到我的数据库中
- python - spacy 句子标记器的跨度
- javascript - 为每个承诺读取数据网址?
- unity3d - Unity 3D:如何让一个拥有角色控制器的玩家可以推动另一个拥有角色控制器的玩家?
- python - pytest_runtest_setup/call/teardown 和 @pytest.hookimpl(hookwrapper=True)