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（）中。

JS功能故障 - ReNning NaN

3 个答案: