Question

请原谅我的无知，因为我是Java脚本的新手。这就是我想要做的。我有一个表单，用户可以在其中输入数据以获得报销。它将总计水平相加，然后取最终值并垂直添加它们以获得总计。我有一切水平工作，我可以垂直添加最后5行，但是当我添加前两行时，它不起作用。我得到了NaN的答案。这是代码。

<script type="text/javascript">
function calcWages(){
    document.getElementById('wages').innerHTML = '';
    var num2 = new Number(document.getElementById('hours').value);
    var num3 = new Number(document.getElementById('rate').value);
    document.getElementById('wages').innerHTML = ((num3 * num2).toFixed(2));
}

function calcMilage(){
    document.getElementById('milage').innerHTML = '';
    var num4 = new Number(document.getElementById('miles').value);
    document.getElementById('milage').innerHTML = ((num4 * .555).toFixed(2));
}

function calcTotal(){
    document.getElementById('total').innerHTML = '';
    var num5 = new Number(document.getElementById('wages').value);
    var num6 = new Number(document.getElementById('milage').value);
    var num7 = new Number(document.getElementById('travel').value);
    var num8 = new Number(document.getElementById('lodging').value);
    var num9 = new Number(document.getElementById('food').value);
    var num10 = new Number(document.getElementById('office').value);
    var num11 = new Number(document.getElementById('other').value);
    document.getElementById('total').innerHTML = (( num5 + num6 + num7 + num8 + num9 + num10 + num11).toFixed(2));
}

window.onload=function(){
    document.getElementById('totalCalc').onclick = calcTotal;
}   
</script>


<table>
<tr>
<td></td>
<td></td>
<td></td>
<td>
Total:
</td>
    <td></td>
    <td>

     </td>
</tr>
<tr>
<td>Wages:</td>
<td>Hours:(8 a day Max)<input type="text" name="hours" id="hours" size="3" maxlength="3" onchange="calcWages()"></td>
<td>Rate:<input type="text" name="rate" id="rate" size="3" maxlength="5" onchange="calcWages()"></td>
<td>=</td>
<td><div id="wages"></div></td>
</tr>
<tr>
<td>Milage:</td>
<td>Miles<input type="text" name="miles" id="miles" size="3" maxlength="4" onchange="calcMilage()"></td>
<td>IRS rate ($0.555)</td>
<td>=</td>
<td><div id="milage"></div></td>
</tr> 
<tr>
<td>
   Travel:   </td>
 <td colspan="2">
   <input type="text" name="tavelitem" id="travelitem" size="36">    </td>
 <td>
      = 
     </td>
 <td><input type="text" name="travel" id="travel" size="3"> </td>
</tr>
<tr>
<td>Lodging:</td>
 <td colspan="2"><input type="text" name="lodgingitem" id="lodgingitem" size="36">   </td>
 <td>=</td>
 <td><input type="text" name="lodging" id="lodging" size="3"></td>
</tr>
<tr>
<td>Food:</td>
 <td colspan="2"><input type="text" name="fooditem" id="fooditem" size="36">         </td>
 <td>=</td>
 <td><input type="text" name="food" id="food" size="3"></td>
</tr>
<tr>
<td>Office Supplies:</td>
 <td colspan="2"><input type="text" name="officesupplies" id="officesupplies" size="36">    </td>
 <td>=</td>
 <td><input type="text" name="office" id="office" size="3"></td>
</tr>
<tr>
<td>Other:</td>
 <td colspan="2"><input type="text" name="otheritem" id="otheritem" size="36"></td>
<td>=</td>
<td><input type="text" name="other" id="other" size="3"></td>
</tr>
<tr>
<td></td>
<td><button id="totalCalc">Total</button></td>
<td>Grand Total:</td>
<td>=</td>
<td><div id="total"></div></td>
</tr>
</table>

calcWages函数和calcMilage函数有效，但我似乎已经挂起并获得这两者的结果，以便在calcTotal函数中工作。如果这没有意义，我道歉。让我知道，我会尽力澄清。感谢。

Answer 1

它们的功能不会返回任何内容，因此您无法获取其结果。但是，您可以在calcTotal内调用：

function calcTotal(){
    calcWages();
    calcMilage();
    // ...
}

从我的评论：当你看到自己使用带有运行索引的变量名时，使用数组和/或循环可能是一个更好的解决方案。

在不更改HTML的情况下，更清晰的解决方案是：

var fields = ['wages', 'milage', ...];

function calcTotal(){
    var sum = 0;
    for (var i = 0; i < fields.length; i++)  {
        sum += +document.getElementById(fields[i]).value
    }
    document.getElementById('total').innerHTML = sum.toFixed(2);
}

您还可以为元素提供一个公共类，以避免在数组中列出其ID。

Answer 2

在这里设置.innerHTML

document.getElementById('milage').innerHTML = ((num4 * .555).toFixed(2));
//                                   ^^^

但是你从同一个元素中获得了.value。

var num6 = new Number(document.getElementById('milage').value);
//                                                       ^^^

好像你应该使用其中一个。如果.innerHTML适用于第一个，那么您也应该获取它，反之亦然（除非这可能是textarea元素）。

或者您打算使用miles元素而不是milage。

var num6 = new Number(document.getElementById('miles').value);
//                                              ^^^

Answer 3

<script type="text/javascript">
        function calcWages(){
            document.getElementById('wagestotal').innerHTML = '';
            var hours = new Number(document.getElementById('hours').value);
    var rate = new Number(document.getElementById('rate').value);
           document.getElementById('wagestotal').innerHTML = ((hours * rate).toFixed(2));

        }

         function calcMilage(){
            document.getElementById('milagetotal').innerHTML = '';
            var miles = new Number(document.getElementById('miles').value);
    document.getElementById('milagetotal').innerHTML = ((miles * .555).toFixed(2));
                }


        function calcTotal(){
           document.getElementById('total').innerHTML = '';
        var wages = new Number(document.getElementById('wagestotal').innerHTML);
        var milage = new Number(document.getElementById('milagetotal').innerHTML);
        var travel = new Number(document.getElementById('travel').value);
        var lodging = new Number(document.getElementById('lodging').value);
        var food = new Number(document.getElementById('food').value);
        var office = new Number(document.getElementById('office').value);
        var other = new Number(document.getElementById('other').value);
document.getElementById('total').innerHTML = ((wages + milage + travel + lodging + food + office + other).toFixed(2));
        }
        window.onload=function(){
            document.getElementById('totalCalc').onclick = calcTotal;
        }

       </script>

所以这是最后的剧本。我将变量的名称更改为有意义的事物。我所拥有的最后一手牌是能够通过工资函数来计算总数，并将milage函数添加到总计中。我弄乱的部分是我：

var wages = new Number(document.getElementById('wagestotal').value);
var milage = new Number(document.getElementById('milagetotal').value);

而不是：

var wages = new Number(document.getElementById('wagestotal').innerHTML);
var milage = new Number(document.getElementById('milagetotal').innerHTML);

在calcTotal函数中

。用户可以将内容输入到与之关联的表单中，并且所有内容都按照应有的方式进行汇总。再次感谢您帮助集中精力。

将函数结果传递给Javascript中的另一个函数变量

3 个答案: