javascript - 在 Javascript 中将函数结果传递给另一个函数变量

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

此处设置 .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);
//                                              ^^^