堆栈内存溢出
  繁体   English   中英

如何使用 JavaScript 为不同的选项创建两个不同的计算？

[英]How to create two different calculations for different options using JavaScript.?

 原文  2020-08-02 06:21:31  6   2    javascript/ function/ if-statement/ select/ options

问题描述

这可能是一个简单的问题，但我在搜索中没有找到任何内容，而且我是 JavaScript 初学者。 也许我没有得到答案的确切线索 我想做一个计算器来计算 HRA 豁免，条件如下： • 从雇主那里收到的实际 HRA • 对于住在大城市的人：（基本工资 +亲人津贴）对于居住在非大城市的人：（基本工资+亲人津贴）的40％

我做了计算器，但坚持使用 select 选项，即是/否，因为这两个选项的条件不同发自内心的感激。 提前致谢。

这是我的代码`

<!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>`

2 个解决方案

解决方案1
 1  2020-08-02 09:51:54

您可以 select 两个输入，然后根据检查哪一个来计算答案，或者如果没有检查则显示错误消息。 

 <,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>

解决方案2
 0  2020-08-02 10:30:20

您还可以使用选项本身的.value （我在 html 中将复选框值更改为“0.5”和“0.4”）并使用三元运算符（ test? value for true: value for wrong ）： 

 function calculate() { var opt = document.querySelector(".form-check-inline input:checked"); 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 = opt? opt.value * (a+b): "Please click one option;"; }
 <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 pm</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="0.5"> <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="0.4"> <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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用Javascript在同一面板上显示不同的内容。 如何使用 javascript 创建两个不同的链接 如何使用javascript或jquery从具有相同CSS类名称的两个不同下拉列表中选择选项 如何摆脱 JavaScript 中的天数错误。 在不同月份的两个连续日期获得相同的年龄差异 Javascript onclick 触发两个不同的 Select 选项 如何在 javascript 中创建分区函数。 使用以下准则 Javascript - 创建具有不同值和选项的下拉列表 Javascript。 两个大小相同，性能完全不同的阵列。 为什么？ Javascript。 创建两个具有不同 url 的按钮。 但是最后一个按钮覆盖了旧按钮 HTML、JavaScript。 如何在同一个弹窗按钮上显示不同的信息
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM