Html Question posted in
Some basic documentation can be found here.

Html – Issue with Tax Calculator JavaScript Function

I am working on a tax calculator web application using HTML and JavaScript. The calculator allows users to input their gross salary and select a state from a dropdown menu. The tax rate is then applied based on the selected state, and the calculated tax, net salary, and gross salary are displayed.

“`

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="podatkiCW.css">
  </head>
  <body>

    <h1> Kalkulator podatków </h1>

<div id="Kalkulator">
  <form>
    <label for="brutto">Pensja brutto:</label>
    <input type="text" id="brutto" name="brutto"><br><br>
  </form>

  <label for="stany">Wybierz stan:</label>

  <select id="stany">
    <option value="Alabama">Alabama</option>
    <option value="Alaska">Alaska</option>
    <option value="Arizona">Arizona</option>
    <option value="Arkansas">Arkansas</option>
  </select>



  <div>
    <p> Podatek: </p>
    <p id="podatek"></p>
    <p> Brutto: </p>
    <p id="brutto"> </p>
    <p> Netto: </p>
    <p id="netto"> </p>
  </div>

  <form>
    <button type="button" onclick="liczenie()">Oblicz</button>
    <button type="button" onclick="czysc()">Wyczyść</button>
  </form>

</div>
  <script>
    var stany = document.getElementById('stany');

    function liczenie() {
      var brutto = parseFloat(document.getElementById('brutto').value);

      switch (stany.value) {
        case "Alabama": tax=0.04; break;
        case "Alaska": tax=0; break;
        case "Arizona": tax=0.056; break;
        case "Arkansas": tax=0.065; break;
      }

      let podatek = tax * brutto;
      podatek = podatek.toFixed(2);
      document.getElementById("podatek").textContent = podatek;
      document.getElementById("netto").textContent = (brutto - podatek).toFixed(2);
      document.getElementById("brutto").textContent = brutto.toFixed(2);
    }

    function czysc() {
      document.getElementById('brutto').value = "";
      document.getElementById('netto').textContent = "";
      document.getElementById('podatek').textContent = "";
    }
  </script>

  </body>
</html>

“`

However, I’m facing a problem with the tax calculation. The issue seems to be related to the liczenie() function in my JavaScript code. When I click the "Oblicz" (Calculate) button, the displayed tax value is not correct, and the net salary is not updating accordingly. I’ve double-checked the switch statement for different states, but the problem persists.

Additionally, there might be a conflict with the use of the id="brutto" for both the input field and the displayed gross salary. I’m not sure if this is causing the issue.

I’ve included the relevant parts of my code below for reference. Any help or suggestions on identifying and resolving this issue would be greatly appreciated.

Tags:

2

Answers


  1. 0

    The issue is indeed that you have two elements with the same id (an input element and a paragraph element). Rename one of them so that all ids are distinct on the page.

    Alternatively, a quick fix (that is not recommended) would be to use a more specific selector to target the paragraph:

    document.querySelector("p#brutto").textContent = brutto.toFixed(2);
    Login or Signup to reply.
  2. 0

    I see a couple of potential issues in your code. Let’s address them:

    • ID Conflict:

    You’ve used the same ID "brutto" for both the input field and the paragraph where you display the gross salary. IDs should be unique within a document. To avoid conflicts, change the ID for either the input or the paragraph.

    Example: Change the ID for the paragraph displaying gross salary to something like "bruttoDisplay".

    <p> Brutto: </p>
<p id="bruttoDisplay"> </p>

    And update the corresponding line in your JavaScript:

    document.getElementById("bruttoDisplay").textContent = brutto.toFixed(2);

    • Calculating Net Salary:
      It seems like you’re calculating the net salary using the wrong formula. Instead of subtracting the tax from the gross salary, you should subtract the tax from the original gross salary. Update the line in your JavaScript like this:

      document.getElementById("netto").textContent = (brutto – podatek).toFixed(2);

    This change ensures that the net salary is calculated correctly.

    the wholly HTML file will be here:

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tax Calculator</title>
    <link rel="stylesheet" href="podatkiCW.css">
  </head>
  <body>

    <h1> Kalkulator podatków </h1>

    <div id="Kalkulator">
      <form>
        <label for="brutto">Pensja brutto:</label>
        <input type="text" id="bruttoInput" name="brutto"><br><br>
      </form>

      <label for="stany">Wybierz stan:</label>

      <select id="stany">
        <option value="Alabama">Alabama</option>
        <option value="Alaska">Alaska</option>
        <option value="Arizona">Arizona</option>
        <option value="Arkansas">Arkansas</option>
      </select>

      <div>
        <p> Podatek: </p>
        <p id="podatek"></p>
        <p> Brutto: </p>
        <p id="bruttoDisplay"> </p>
        <p> Netto: </p>
        <p id="netto"> </p>
      </div>

      <form>
        <button type="button" onclick="liczenie()">Oblicz</button>
        <button type="button" onclick="czysc()">Wyczyść</button>
      </form>

    </div>

    <script>
      var stany = document.getElementById('stany');

      function liczenie() {
        var brutto = parseFloat(document.getElementById('bruttoInput').value);

        switch (stany.value) {
          case "Alabama": tax=0.04; break;
          case "Alaska": tax=0; break;
          case "Arizona": tax=0.056; break;
          case "Arkansas": tax=0.065; break;
        }

        let podatek = tax * brutto;
        podatek = podatek.toFixed(2);
        document.getElementById("podatek").textContent = podatek;
        document.getElementById("netto").textContent = (brutto - podatek).toFixed(2);
        document.getElementById("bruttoDisplay").textContent = brutto.toFixed(2);
      }

      function czysc() {
        document.getElementById('bruttoInput').value = "";
        document.getElementById('netto').textContent = "";
        document.getElementById('podatek').textContent = "";
      }
    </script>

  </body>
</html>

    hope these answer help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search