Why is my Javascript variables are not initializing?

Question

i am trying to build a simple Salary Calculator which deducts certain percentages from basic salary and then displays that value in that input element but it is not working and i am not sure what is wrong. Maybe my variables are not initializing because after i run the program when i check for variable values in the console, it says that variable is undefined.

during debugging the values were properly calculated but in the end not put into the input element. It may be a stupid mistake but i tried everything i could but can't seem to make it work. Any guidance would be helpful

function salCal() {
  var salary = document.forms[0][6].value;
  var utilities = document.forms[0][7].value;
  var houseRent = document.forms[0][8].value;
  var tax = document.forms[0][9].value;
  var totalSalary = document.forms[0][10].value;

  if (salary == "") {
    window.alert("Basic Salary Missing");
  }

  utilities = 10 / 100 * salary;
  houseRent = 8 / 100 * salary;
  tax = 2 / 100 * salary;
  totalSalary = salary - (utilities + houseRent + tax);

}

<center>
  <h1>Employee Salary Calculator</h1>

  <form>
    <table>

      <tr>
        <td>Employee ID</td>
        <td> <input type="text" value=""></td>
      </tr>

      <tr>
        <td>Employee Name</td>
        <td><input type="text" value=""></td>
      </tr>

      <tr>
        <td>Father Name</td>
        <td><input type="text" value=""></td>
      </tr>

      <tr>
        <td>Gender</td>
      </tr>

      <tr>
        <td>
          Male
        </td>
        <td>
          <input type="radio" name="gender" checked>
        </td>
      </tr>
      <tr>
        <td>
          Female
        </td>
        <td>
          <input type="radio" name="gender">
        </td>
      </tr>

      <tr>
        <td>CNIC</td>
        <td><input type="text" value=""></td>
      </tr>

      <tr>
        <td>Basic Salary*</td>
        <td><input type="number" name="sal"></td>
      </tr>

      <tr>
        <td>Utilities*</td>
        <td><input type="number" disabled></td>
      </tr>

      <tr>
        <td>House Rent*</td>
        <td><input type="number" disabled></td>
      </tr>

      <tr>
        <td>Tax Percentage*</td>
        <td><input type="number" disabled></td>
      </tr>

      <tr>
        <td>Total Salary*</td>
        <td><input type="number" disabled></td>
      </tr>

      <tr>
        <td>Tax Year</td>
        <td>
          <select>
            <option selected>2014</option>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
          </select>
        </td>
      </tr>

      <tr>
        <td><input type="button" value="Calculate" onclick="salCal()"></td>
        <td><input type="button" value="Reset"></td>
      </tr>



    </table>
  </form>
</center>

Answer 1

The reason is because your variables are within the scope of your salCal() function. These variables can be accessed within the function, but are deleted as soon as the function ends. To fix this, define your variables outside of the function (as a placeholder value), then give them actual value inside of the function.

Answer 2

The scope of the variables are within the function salCal. If you want it in console, put the variables outside in global scope

var salary, utilities, houseRent , tax , totalSalary  ;

function salCal() {
    salary = document.forms[0][6].value;
    utilities = document.forms[0][7].value;
    houseRent = document.forms[0][8].value;
    tax = document.forms[0][9].value;
    totalSalary = document.forms[0][10].value;

    if(salary == "") {
        window.alert("Basic Salary Missing");
    }

    utilities = 10/100*salary;
    houseRent = 8/100*salary;
    tax = 2/100*salary;
    totalSalary = salary - (utilities + houseRent + tax);

}

during debugging the values were properly calculated but in the end not put into the input element

You need to assign the value back to input

document.forms[0][10].value = totalSalary ;