Блог

Я пытаюсь создать калькулятор заработной платы, который принимает количество часов, умножает его на почасовую ставку, а затем умножается на 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>
  

Установите значение a , b и c каждый раз, когда функция выполняется. Вы просто устанавливаете его один раз. Также вместо точечной нотации для доступа к элементам формы получите их значение по идентификатору.

 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>  

Это должно сработать для вас:

 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>  

Ваша проблема заключалась в том, что вы получали входные значения при загрузке страницы, а не при нажатии пользователем кнопки.

  <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() .