Мой javascript не работает, вам нужна ваша помощь, чтобы исправить ошибку

Я создаю простой калькулятор зарплаты сотрудников, javascript не работает. Пожалуйста, помогите мне исправить это. Вот основное кодирование php

<script type="text/javascript">
    function sum() {
        var basicSalary = document.getElementById('basicSalary').value;
        var overtime= document.getElementById('overtime').value;
        var allowance= document.getElementById('allowance').value;
        var grossSalary = parseFloat(basic_salary)+parseFloat(allowance)+parseFloat(overtime);
        if (!isNaN(grossSalary)) {
            document.getElementById('grossSalary').value = grossSalary;
        }
    }
</script>

<div class="form-group">
    <label>Basic Salary</label>
    <input type="text" class="form-control" id="basicSalary" name="basic_salary" placeholder="Enter employee basic salary per month" onkeyup="sum()">
</div>

<div class="form-group">
    <label>Allowance</label>
    <input type="text" class="form-control" id="allowance" name="allowance" placeholder="Enter allowance" onkeyup="sum()">
</div>

<div class="form-group">
    <label>Bonus</label>
    <input type="text" class="form-control" id="bonus" name="bonus" placeholder="Enter bonus value" onkeyup="sum()">
</div>

<div class="form-group">
    <label>Over Time</label>
    <input type="text" class="form-control" id="overtime" name="overtime" placeholder="Enter overtime" onkeyup="sum()">
</div>

<div class="form-group">
    <label>Gross Salary</label>
    <input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>

Вот код для ссылки jquery

введите описание изображения здесь

Ответ 1

Неверное имя переменной (basic_salary).

НЕПРАВИЛЬНО:

var grossSalary = parseFloat(basic_salary)+parseFloat(allowance)+parseFloat(overtime);

RIGHT:

var grossSalary = parseFloat(basicSalary)+parseFloat(allowance)+parseFloat(overtime);

Ответ 2

Вам нужно разобрать basicSalary, а не basic_salary, так как basic_salary не определен

<script type="text/javascript">
    function sum() {
        var basicSalary = document.getElementById('basicSalary').value;
        var overtime= document.getElementById('overtime').value;
        var allowance= document.getElementById('allowance').value;
        var grossSalary = parseFloat(basicSalary)+parseFloat(allowance)+parseFloat(overtime);
        if (!isNaN(grossSalary)) {
            document.getElementById('grossSalary').value = grossSalary;
        }
    }
</script>

<div class="form-group">
    <label>Basic Salary</label>
    <input type="text" class="form-control" id="basicSalary" name="basic_salary" placeholder="Enter employee basic salary per month" onkeyup="sum()">
</div>

<div class="form-group">
    <label>Allowance</label>
    <input type="text" class="form-control" id="allowance" name="allowance" placeholder="Enter allowance" onkeyup="sum()">
</div>

<div class="form-group">
    <label>Bonus</label>
    <input type="text" class="form-control" id="bonus" name="bonus" placeholder="Enter bonus value" onkeyup="sum()">
</div>

<div class="form-group">
    <label>Over Time</label>
    <input type="text" class="form-control" id="overtime" name="overtime" placeholder="Enter overtime" onkeyup="sum()">
</div>

<div class="form-group">
    <label>Gross Salary</label>
    <input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>