Javascript: Калькулятор зарплаты (возникают проблемы с отображением правильного номера) - PullRequest
Новая
       0

Javascript: Калькулятор зарплаты (возникают проблемы с отображением правильного номера)

0 голосов
/ 08 апреля 2020

Чтобы отработать свои навыки javascript, я занялся сайд-проектом по созданию калькулятора зарплаты. У меня возникают проблемы с моим утверждением «если ... еще». Насколько я могу судить, я не могу получить правильную ставку налога, отображаемую на основе данных пользователя. Независимо от того, что я ввожу, консоль показывает .10

Вот это HTML: 

const userSalary = document.querySelector('#salary');
const button = document.querySelector('.calculate');

if (parseInt(userSalary.value) >= 100000) {
  var taxRate = 0.37;
} else {
  var taxRate = 0.10;
}

button.addEventListener('click', event => {
  console.log(parseInt(taxRate));
});
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body style="background-color: white;">
  <form>
    <label for="contribution">Enter contribution percentage</label>
    <input type="number" id="contribution" name="contribution"><br><br>

    <label for="salary">Enter your annual salary:</label>
    <input type="text" id="salary" name="salary"><br><br>

    <label for="tax">Select your tax filing status:</label>
    <select id="tax">
      <option value="single">Single</option>
      <option value="married_joint">Married Filing Jointly</option>
      <option value="married_separately">Married Filing Separately</option>
      <option value="head_household">Head of Household</option>
    </select><br><br>

    <label for="paycheck_frequency">Paycheck Frequency</label>
    <select id="paycheck_frequency">
      <option value="weekly">Weekly</option>
      <option value="biweekly">Biweekly</option>
      <option value="twice_monthly">Twice a Month</option>
      <option value="monthly">Monthly</option>
    </select>
  </form>

</body>
<button class="calculate">Calculate</button>
<script src="main.js"></script>

</html>

Вот это javascript: 

const userSalary = document.querySelector('#salary');
const button = document.querySelector('.calculate');

if (parseInt(userSalary.value) >= 100000) {
  var taxRate = 0.37;
} else {
  var taxRate = 0.10;
}

button.addEventListener('click', event => {
  console.log(parseInt(taxRate));
});

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

Попробуйте вместо javascript: 

const userSalary = document.querySelector('#salary');
const button = document.querySelector('.calculate');

let taxRate;

function recalculateTaxRate() {
  if (parseInt(userSalary.value) >= 100000) {
    taxRate = 0.37;
  } else {
    taxRate = 0.10;
  }
}

button.addEventListener('click', event => {
  // Recalculate the rate before printing it.
  recalculateTaxRate();
  console.log(taxRate);
});
0 голосов
/ 08 апреля 2020

Ваш блок if-else запускается при загрузке страницы. В то время userSalary.value - ничто. Почему? Потому что никто еще ничего не вводил в этот ввод.

Вы хотите, чтобы ваш блок if-else запускался, когда пользователь нажимает кнопку. Так что перенесите его в ваш слушатель событий. Затем он ведет себя так, как вы хотите, и пересчитывает ставку налога при каждом нажатии кнопки. Надеюсь, это поможет. 

const userSalary = document.querySelector('#salary');
const button = document.querySelector('.calculate');

button.addEventListener('click', event => {
  if (parseInt(userSalary.value) >= 100000) {
     var taxRate = 0.37;
  } else {
     var taxRate = 0.10;
  }
  console.log("User Salary value:", parseInt(userSalary.value));
  console.log("Tax Rate:", taxRate);
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form>
      <label for="contribution">Enter contribution percentage</label>
      <input type="number" id="contribution" name="contribution"><br><br>

      <label for="salary">Enter your annual salary:</label>
      <input type="text" id="salary" name="salary"><br><br>

      <label for="tax">Select your tax filing status:</label>
      <select id="tax">
        <option value="single">Single</option>
        <option value="married_joint">Married Filing Jointly</option>
        <option value="married_separately">Married Filing Separately</option>
        <option value="head_household">Head of Household</option>
      </select><br><br>

        <label for="paycheck_frequency">Paycheck Frequency</label>
        <select id="paycheck_frequency">
          <option value="weekly">Weekly</option>
          <option value="biweekly">Biweekly</option>
          <option value="twice_monthly">Twice a Month</option>
          <option value="monthly">Monthly</option>
      </select>
    </form>

  </body>
    <button class="calculate">Calculate</button>
  <script src="main.js"></script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...