Javascript：无法获得用户输入生成的数学产品输出

-2

我正在试图制作LED节能计算器（通过网页的用户输入）。使用下面的代码，它可以成功输出现有灯具的年用电量和此用电成本。但我不明白为什么它不会为建议的灯具做同样的事情。Javascript：无法获得用户输入生成的数学产品输出

如果任何人都可以借我一个线索，那太棒了！谢谢！

（请注意，我知道没有声明所有变量都尚未使用的。）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>LED Savings Calculator</title> 
</head> 

<body> 

<b>Electric utility rate</b> 
<table border="1"> 
<tr> 
    <td>Your electric utility rate ($/kWh):</td> 
    <td><input id="elecRate" value="0.17" onchange="calculate();"></td> 
</tr> 
</table> 

<br><br> 

<b>Existing Lighting:</b> 
<table border="1"> 
<tr> 
    <td>Number of existing fixtures:</td> 
    <td><input id="numExisting" onchange="calculate();"></td> 
</tr> 
<tr> 
    <td>Watts per fixture (include watts of bulbs or tubes, plus watts of  ballast):</td> 
    <td><input id="wattsExisting" onchange="calculate();"></td> 
</tr> 
<tr> 
    <td>Cost of bulbs or tubes, per fixture:</td> 
    <td><input id="priceExisting" onchange="calculate();"></td> 
</tr> 
<tr> 
    <td>Lifespan of bulb or tube (rated hours):<br><br> 
     (Typical incandescent: 1,000 - 2,000 hours.)</td> 
    <td><input id="lifeExisting" onchange="calculate();"></td> 
</tr> 
<tr> 
    <td>Hours lights are on per day (average per fixture):</td> 
    <td><input id="hoursOn" onchange="calculate();"></td> 
</tr> 
<tr> 
    <td>Days lights are on per week (average per fixture):</td> 
    <td><input id="daysOn" onchange="calculate();"></td> 
</tr> 
<tr> 
    <td>Total electric use per year (kWh):</td> 
    <td><span id="kwhPerYearField"></span></td> 
</tr> 
<tr> 
    <td>Total electric cost per year:</td> 
    <td>$<span id="elecCostPerYearField"></span></td> 
</tr> 
</table> 

<br><br> 

<b>Proposed LED Lighting:</b> 
<table border="1"> 
<tr> 
    <td>Number of proposed LED fixtures:<br>(Note that often less LED fixtures than existing fixtures are necessary to provide same lighting.)</td> 
    <td><input id="numProposed" onchange="calculate();"></td> 
</tr> 
<tr> 
    <td>Watts per proposed LED fixture:<br></td> 
    <td><input id="wattsProposed" onchange="calculate();"></td> 
</tr> 
<tr> 
    <td>Cost of upgrade per proposed LED fixture ($):</td> 
    <td><input id="costPerProposed" onchange="calculate();"></td> 
</tr> 
<tr> 
    <td>Lifespan (rated hours) per proposed LED bulb or tube:</td> 
    <td><input id="lifeProposed" onchange="calculate();"></td> 
</tr> 
<tr> 
    <td>Total electric use per year (kWh) (all proposed fixtures):</td> 
    <td><span id="kwhPerYearProposedField"></span></td> 
</tr> 
<tr> 
    <td>Total electric cost per year (all proposed fixtures):</td> 
    <td>$<span id="elecCostPerYearProposedField"></span></td> 
</tr> 
</table> 

<script language="JavaScript"> 
function calculate(){ 
    <!-- Existing lighting: --> 
    var numExisting = document.getElementById("numExisting").value; 
    var wattsExisting = document.getElementById("wattsExisting").value; 
    var priceExisting = document.getElementById("priceExisting").value; 
    var lifeExisting = document.getElementById("lifeExisting").value; 
    var elecRate = document.getElementById("elecRate").value; 
    var hoursOn = document.getElementById("hoursOn").value; 
    var daysOn = document.getElementById("daysOn").value; 

    var kwhPerYearField = document.getElementById("kwhPerYearField"); 
    var elecCostPerYearField = document.getElementById("elecCostPerYearField"); 
    var kwhPerYear = (numExisting*wattsExisting*hoursOn*daysOn*52)/1000; 
    kwhPerYearField.innerHTML = kwhPerYear.toString(); 
    elecCostPerYearField.innerHTML = (kwhPerYear*elecRate).toFixed(2); 


    <!-- Proposed lighting: --> 
    var numProposed = document.getElementById("numProposed").value; 
    var wattsProposed = document.getElementById("wattsProposed").value; 
    var costPerProposed = document.getElementById("costPerProposed").value; 
    var lifeProposed = document.getElementById("lifeProposed").value; 

    var kwhPerYearProposed = (numProposed*wattsProposed*hoursOn*daysOn*52)/1000; 
    var kwhPerYearProposedField = document.getelementbyid("kwhPerYearProposedField"); 
    kwhPerYearProposedField.innerHTML = kwhPerYearProposed.toString(); 

    var elecCostPerYearProposedField = document.getElementById("elecCostPerYearProposedField"); 
    elecCostPerYearProposedField.innerHTML = (kwhPerYearProposed*elecRate).toFixed(2); 
} 
</script> 

</body> 
</html>

来源

2015-09-17 Jeff

你打扰检查Javascript控制台的错误吗？你需要先做一些你自己的调试。 StackOverflow应该是**最后一个**度假村，而不是第一个。 – Barmar

是的，我先调试。我正在使用WebStorm。它没有标记它。你有更好的IDE使用建议吗？ – Jeff

我不知道WebStorm（我使用PhpStorm，Mac版本，但我从不使用它的内置调试器），但在真正的浏览器中尝试它会显示@Halcyon指出的错误。 – Barmar

Uncaught TypeError: document.getelementbyid is not a function

更改为getElementbyId。 JavaScript是case sensitive。

var kwhPerYearProposedField = document.getelementbyid("kwhPerYearProposedField"); 
//         ^

来源

2015-09-17 17:12:18 Halcyon

Javascript：无法获得用户输入生成的数学产品输出

回答

相关问题