JS函数故障-恢复NaN

Question

我正在尝试制作一个工资计算器，它以小时为输入，乘以时薪，然后再乘以52乘以年薪。当我试图运行我的函数来获得薪水时，我的问题就来了。每当我按下它，我就会遇到一个NaN。任何帮助都将不胜感激。

   <form name="salInput">
       Hourly Rate <input type ="text" id="HourlyRate" /><br />
       Hours per Week <input type ="text" id="HoursPerWeek" /><br />    
    </form>


    <script>
      var a = parseFloat(salInput.HourlyRate.value);
      var b = parseFloat(salInput.HoursPerWeek.value);
      var c = a*b*52; 
     function salCalc(){ 

     document.getElementById("change").innerHTML = c;
}
     </script>


<button onclick="salCalc()">Calculate</button>
<p id="change"></p>

Answer 1

每次函数执行时设置a、b和c的值。你只是设置了一次。另外，代替用于访问表单元素的点符号，通过ID获取它们的值。

​

function salCalc() {
     var a = parseFloat(document.getElementById("HourlyRate").value);
     var b = parseFloat(document.getElementById("HoursPerWeek").value);
     var c = a * b * 52;
     document.getElementById("change").innerHTML = c;
}

<form name="salInput">
  Hourly Rate
  <input type="text" id="HourlyRate" />
  <br />Hours per Week
  <input type="text" id="HoursPerWeek" />
  <br />
</form>
<button onclick="salCalc()">Calculate</button>
<p id="change"></p>

​

Answer 2

这应该适用于你：

​

document.querySelector("button").addEventListener("click", salCalc, false);

function salCalc() {
  var a = document.querySelector("#HourlyRate").value;
  var b = document.querySelector("#HoursPerWeek").value;
  var c = a * b * 52;
  document.querySelector("#change").innerHTML = c;
}

<form name="salInput">
  Hourly Rate
  <input type="text" id="HourlyRate" />
  <br /> Hours per Week
  <input type="text" id="HoursPerWeek" />
  <br />
</form>
<button>Calculate</button>
<p id="change"></p>

​

您的问题是在页面加载时获得输入值，而不是当用户单击按钮时。

Answer 3

 <script>
function salCalc(){
     var a = parseFloat(salInput.HourlyRate.value);
     var b = parseFloat(salInput.HoursPerWeek.value);
     var c = a * b * 52;
     console.log(a, b, c);
 document.getElementById("change").innerHTML = c;
 }</script>

运行函数时获取值。因此，将变量保存在函数salCalc()中。