Question

我有一个只读的输入字段，向用户显示他们花钱后留下的钱。他们首先必须输入他们的收入，在支出领域，它将显示数据库的价值。我的问题是在计算javascript中剩余的钱后，该值不会显示在leftOver字段中。我不确定我做错了什么。这是我的代码：

  <script type="text/javascript">
             $(document).ready(function(){
                 $("#addRecord").hide();
                 $("#btnAdd").click(function(){
                     $("#addRecord").show();
                 });
             });
         </script>

         <script type="text/javascript">
             function getTotalIncome(){
             var income = parseFloat(document.getElementById("income").value);
             var otherIncome = parseFloat(document.getElementById("otherIncome").value);
             var totalIncome = income + otherIncome;

             document.getElementById("totalIncome").value = '$' + totalIncome;
         }
         </script>

     <script type="text/javascript">
                 function getLeftOver(){
                     var totalIncome = parseFloat(document.getElementById("totalIncome").value);
                     var totalSpending = parseFloat(document.getElementById("totalSpending").value);
                     var leftOver = totalIncome - totalSpending;

                     document.getElementById("leftOver").value = '$' + leftOver;
                 }
             </script>
        </head>
        <body>
             <button id="btnAdd" type="button" name="btnAdd">Create A Budget</button>

             <form id="addRecord" name="addRecord" action="Budget" method="post">
                 <h3>Income</h3>
                 <label>Income:</label>
                 <input type="text" name="income" id="income" onchange="getTotalIncome()"> <br>
                 <label>Other Income:</label>
                 <input type="text" name="otherIncome" id="otherIncome" onchange="getTotalIncome()"><br>

                 <hr>
                 <h3>Spending</h3>
                 <label>Total Amount Of Spending</label>
                 <input type="text" name="totalSpending" value="$${totalSpending}" disabled=disabled>

                 <hr>
                 <h4>You've budgeted</h4>
                 <label>Income</label>
                 <input type="text" name="totalIncome" id="totalIncome" readonly="readonly" onchange="getLeftOver()">
                 <label>Spending</label>
                 <input type="text" name="totalSpending" id="totalSpending" value="$${totalSpending}" readonly="readonly"  onchange="getLeftOver()">
                 <label>Left Over</label>
                 <input type="text" name="leftOver" id="leftOver" readonly="readonly">


            </form>
        </body>

从javascript中显示字段中的值

0 个答案: