激活单选按钮并计算文本框值

时间：2014-11-10 10:18:37

标签： javascript html5

我是以下代码。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script type="text/javascript">
        function isNumberKey(as) {
            var dd = as.value;
            if (isNaN(dd)) {
                dd = dd.substring(0, (dd.length - 1));
                as.value = dd;
            }
        }

        function activate(){
            document.getElementById('rate').readOnly=false;
        }

        function deactivate(){
            document.getElementById('rate').readOnly=true;
            var int = document.calc.loan.value;
            if(int > 50000 && int < 100000){
            document.calc.rate.value=10;
            }
            if(int > 100000 && int < 150000){
            document.calc.rate.value=12;
            }
        }

        function showpay() {
            var a = document.calc.loan.value;
            var b = document.calc.rate.value;
            var c = document.calc.months.value;
            var n = c ;
            var r = b / (12 * 100);
            var p = (a * r * Math.pow((1 + r), n)) / (Math.pow((1 + r), n) - 1);
            var prin = Math.round(p * 100) / 100;
            document.calc.pay.value = Math.round(prin);
           // document.calc.totInt.value = round((prin * c) - a);
           // document.calc.totpay.value = round((prin * c) - a);
            document.calc.totInt.value = Math.round((prin * c) - a);
            document.calc.totpay.value = Math.round(prin * c);
        } </script>

</head>

<body class="body">
<header class="mainheader">
<img src="img/logo.gif" alt=""/>
<nav>
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li class="active"><a href="calculators.html">Calculators</a></li>
<li><a href="contactuS.html">Contact Us</a></li>
</ul>
</nav>
</header><br>
<div class="maincontent">
<div class="content" style="width:100%">
<article class="topcontent">
<header><h2 style="align:center" title="firstpost"><p align="center" style="color: #CF5C3F;">Loan Calculator</p></h2></header>
<footer>
<p class="post-info"></p>
</footer>
<content>
<p>
<center>
    <form name="calc">
<table width="200" border="1">
  <tbody>
    <tr>
      <th scope="col">Description</th>
      <th scope="col">Data Entry</th>
    </tr>
    <tr>
      <td>Principle($)</td>
      <td><input type="text" name="loan" id="loan" placeholder="Enter the amount Required" onkeypress="isNumberKey(this)"/>
      </td><span id="error"/>
    </tr>
        <tr>
      <td>Do you know Rate of Interest</td>
      <td>
      <input type="radio" name="radio" value="Yes" onClick="activate()">Yes<br/>
      <input type="radio" name="radio" value="No" onClick="deactivate()">No
      </td><!--<span id="error"/>-->
    </tr>
    <tr>
      <td>Interest(%)</td>
      <td><input type="text" name="rate" id="rate" placeholder="Enter the Interest Rate" onkeypress="isNumberKey(this)"/>
      </td><!--<span id="error"/>-->
    </tr>
    <tr>
      <td>Tenure(in Months)</td>
      <td>
        <input type="text" name="months" id="months" placeholder="Enter the Tenure in Months"  onkeypress="isNumberKey(this)"/>
        </td><!--<span id="error"/>-->
    </tr>
        <tr>
      <td>EMI</td>
      <td>
        <input name="textfield4" type="text" id="pay" placeholder="Your EMI" readonly/></td>
    </tr>
        <tr>
      <td align="center"><input type="button" value="Submit" onClick='showpay()'/></td>
      <td align="center"><input type="reset" value="Reset"/></td>
    </tr>
     <tr>
      <td>Total Interest Paid</td>
      <td>
        <input name="totInt" type="text" id="totInt" placeholder="Total Interest" readonly/></td>
    </tr>
     <tr>
      <td>Total Repay Amount</td>
      <td>
        <input name="totpay" type="text" id="totpay" placeholder="Total Amount" readonly/></td>
    </tr>
  </tbody>
</table>
</form>
</center>

</p>
</content>
</article>
</div>
</div>


<footer class="mainfooter">
<p>this is copyright &copy;</p>
</footer>



</body>
</html>

这里我试图实现以下目标。

  1. 如果用户选择Yes单选按钮，则兴趣旁边的文本框应接受手动输入，否则，兴趣应如下所示。

  2. 如果用户输入介于50000和100000之间的金额，则兴趣应显示为15

  3. 如果用户输入介于100000和150000之间的金额，则兴趣应显示为12
  4. 否则利息应该显示，18。

    5. 并根据此兴趣计算金额。

    当我输入金额和热门号码

    时，我无法获得该号码

    请让我知道我怎么能得到这个。

    由于

2 个答案:

答案 0 :(得分：1)

尝试使用angularJS方式。

以角度样式查看此代码。没有Jquery。

HTML 

<div ng-app>
<nav>
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li class="active"><a href="calculators.html">Calculators</a></li>
<li><a href="contactuS.html">Contact Us</a></li>
</ul>
</nav>
</header><br>
<div class="maincontent">
<div class="content" style="width:100%">
<article class="topcontent">
<header><h2 style="align:center" title="firstpost"><p align="center" style="color: #CF5C3F;">Loan Calculator</p></h2></header>
<footer>
<p class="post-info"></p>
</footer>
<content ng-controller="CalcCtrl">
<p>
<center>
    <form name="calc">
<table width="200" border="1">
  <tbody>
    <tr>
      <th scope="col">Description</th>
      <th scope="col">Data Entry</th>
    </tr>
    <tr>
      <td>Principle($)</td>
      <td><input type="text" name="loan" id="loan" ng-model="loan" placeholder="Enter the amount Required" ng-change="isNumberKey()"/>
      </td><span id="error"/>
    </tr>
        <tr>
      <td>Do you know Rate of Interest</td>
      <td>
      <input type="radio" name="radio" value="Yes" ng-change="change()" ng-model="rateint">Yes<br/>
      <input type="radio" name="radio" value="No" ng-change="change()" ng-model="rateint">No
      </td><!--<span id="error"/>-->
    </tr>
    <tr>

      <td>Interest(%)</td>
      <td><input type="text" name="rate" id="rate" ng-model="rate" placeholder="Enter the Interest Rate" onkeypress="isNumberKey()" ng-disabled="rateint != 'Yes'" />
      </td><!--<span id="error"/>-->
    </tr>
    <tr>
      <td>Tenure(in Months)</td>
      <td>
        <input type="text" name="months" id="months" ng-model="months" placeholder="Enter the Tenure in Months"  ng-change="isNumberKey()"/>
        </td><!--<span id="error"/>-->
    </tr>
        <tr>
      <td>EMI</td>
      <td>
        <input name="textfield4" type="text" id="pay" ng-model="pay" placeholder="Your EMI" readonly/></td>
    </tr>
        <tr>
      <td align="center"><input type="button" value="Submit" ng-click="showpay()"/></td>
      <td align="center"><input type="reset" value="Reset"/></td>
    </tr>
     <tr>
      <td>Total Interest Paid</td>
      <td>
        <input name="totInt" type="text" ng-model="toInt" id="totInt" placeholder="Total Interest" readonly/></td>
    </tr>
     <tr>
      <td>Total Repay Amount</td>
      <td>
        <input name="totpay" type="text" ng-model="topay" id="totpay" placeholder="Total Amount" readonly/></td>
    </tr>
  </tbody>
</table>
</form>
</center>

</p>
</content>
</article>

</div>
</div>


<footer class="mainfooter">
<p>this is copyright &copy;</p>
</footer>
</div>

JS 

function CalcCtrl($scope) {
   $scope.loan = $scope.loan ? $scope.loan : 0
   $scope.rate = $scope.rate ? $scope.rate : 1
   $scope.months = $scope.months ? $scope.months : 1
 $scope.isNumberKey = function() {
            var dd = $scope.loan;
            if (dd && isNaN(dd)) {
                dd = dd.substring(0, (dd.length - 1));
                $scope.loan = dd;
            }
        }



      $scope.change = function(){
          if ($scope.rateint === 'No'){
              var loan = $scope.loan
                if(loan > 50000 && loan < 100000){
               $scope.rate=10;
                }
                if(loan > 100000 && loan < 150000){
              $scope.rate=12;
                }
              }
        }

        $scope.showpay = function() {
            var a = $scope.loan;
            var b = $scope.rate;
            var c = $scope.months
            console.log(a,b,c)
            var n = c ;

            var r = b / (12 * 100);
                                     console.log(b)
            var p = (a * r * Math.pow((1 + r), n)) / (Math.pow((1 + r), n) - 1);

            var prin = Math.round(p * 100) / 100;

            $scope.pay = Math.round(prin);
           // document.calc.totInt.value = round((prin * c) - a);
           // document.calc.totpay.value = round((prin * c) - a);
            $scope.toInt = Math.round((prin * c) - a);
            $scope.topay = Math.round(prin * c);
        } 
}

看到这个工作小提琴。

http://jsfiddle.net/U3pVM/10271/

在看到angularjs文档之后：

https://docs.angularjs.org/api

答案 1 :(得分：1)

试试这个：）

<script type="application/javascript">

    function isNumberKey(id) {
            var dd = document.getElementById(id).value;
            if (isNaN(dd)) {
                dd = dd.substring(0, (dd.length - 1));
                document.getElementById(id).value = dd;
            }
        }

        function activate(){
            document.getElementById('rate').readOnly =false;
    console.log(document.getElementById('rate').readOnly)
        }

        function deactivate(){
            document.getElementById('rate').readOnly =true;
        console.log(document.getElementById('rate').readOnly)
            var int = document.calc.loan.value;
            if(int > 50000 && int < 100000){
            document.calc.rate.value=10;
            }
            if(int > 100000 && int < 150000){
            document.calc.rate.value=12;
            }
        }

        function showpay() {
            var a = document.calc.loan.value;

            var b = document.calc.rate.value ? document.calc.rate.value : 1;
            var c = document.calc.months.value;
            var n = c ;
            var r = b / (12 * 100);
            var p = (a * r * Math.pow((1 + r), n)) / (Math.pow((1 + r), n) - 1);
            var prin = Math.round(p * 100) / 100;

            document.calc.pay.value = Math.round(prin);
           // document.calc.totInt.value = round((prin * c) - a);
           // document.calc.totpay.value = round((prin * c) - a);
            document.calc.totInt.value = Math.round((prin * c) - a);
            document.calc.totpay.value = Math.round(prin * c);
        }
</script>
<div>
<nav>
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li class="active"><a href="calculators.html">Calculators</a></li>
<li><a href="contactuS.html">Contact Us</a></li>
</ul>
</nav>
</header><br>
<div class="maincontent">
<div class="content" style="width:100%">
<article class="topcontent">
<header><h2 style="align:center" title="firstpost"><p align="center" style="color: #CF5C3F;">Loan Calculator</p></h2></header>
<footer>
<p class="post-info"></p>
</footer>
<content>
<p>
<center>
    <form name="calc">
<table width="200" border="1">
  <tbody>
    <tr>
      <th scope="col">Description</th>
      <th scope="col">Data Entry</th>
    </tr>
    <tr>
      <td>Principle($)</td>
      <td><input type="text" name="loan" id="loan"  placeholder="Enter the amount Required" onkeypress="isNumberKey('loan')"/>
      </td><span id="error"/>
    </tr>
        <tr>
      <td>Do you know Rate of Interest</td>
      <td>
      <input type="radio" name="radio" value="Yes" onclick="activate()">Yes<br/>
      <input type="radio" name="radio" value="No" onclick="deactivate()">No
      </td><!--<span id="error"/>-->
    </tr>
    <tr>

      <td>Interest(%)</td>
      <td><input type="text" name="rate" id="rate" readonly="" placeholder="Enter the Interest Rate" onkeypress="isNumberKey('rate')"  />
      </td><!--<span id="error"/>-->
    </tr>
    <tr>
      <td>Tenure(in Months)</td>
      <td>
        <input type="text" name="months" id="months" placeholder="Enter the Tenure in Months" onkeypress="isNumberKey('months')"/>
        </td><!--<span id="error"/>-->
    </tr>
        <tr>
      <td>EMI</td>
      <td>
        <input name="textfield4" type="text" id="pay"  placeholder="Your EMI" readonly/></td>
    </tr>
        <tr>
      <td align="center"><input type="button" value="Submit" onclick="showpay()"/></td>
      <td align="center"><input type="reset" value="Reset"/></td>
    </tr>
     <tr>
      <td>Total Interest Paid</td>
      <td>
        <input name="totInt" type="text"  id="totInt" placeholder="Total Interest" readonly/></td>
    </tr>
     <tr>
      <td>Total Repay Amount</td>
      <td>
        <input name="totpay" type="text"  id="totpay" placeholder="Total Amount" readonly/></td>
    </tr>
  </tbody>
</table>
</form>
</center>

</p>
</content>
</article>

</div>
</div>


<footer class="mainfooter">
<p>this is copyright &copy;</p>
</footer>
</div>

工作小提琴：http://jsfiddle.net/U3pVM/10274/

相关问题
最新问题