JavaScript求和函数无响应问题排查求助

核心问题点 #

1. 下拉框事件绑定错误
   你给<select>元素绑定了onclick事件，这个事件只会在点击下拉框展开选项时触发，而非选择新选项后触发。应该用onchange事件，确保值变更时才执行对应逻辑。

2. 赋值后未触发求和
   每个设置薪资项的函数（golongan()、fungsional()、struktural()）完成赋值后，没有调用sum()函数，导致总和不会自动更新。

3. 空值未处理导致NaN
   当某个薪资项为空时，parseFloat()会返回NaN，最终求和结果也会变成NaN，需要给空值设置默认值0。

修复后的完整代码 #

<div class="modal fade" id="tambahgajiModal" tabindex="-1" role="dialog" aria-labelledby="tambahgajiModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tambahfungsiModal">Tambah Gaji Karyawan</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="/gaji/insert" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="content">
                        <div class="row">
                            <div class="col-sm-12">
                                <script type="text/javascript">
                                    function golongan() {
                                        var data = document.getElementById("gol").value;
                                        document.getElementById("tunjangan_gol").value = data;
                                        sum(); // 赋值后触发求和
                                    }
                                    function fungsional() {
                                        var data = document.getElementById("fungsi").value;
                                        document.getElementById("tunjangan_fungsi").value = data;
                                        sum(); // 赋值后触发求和
                                    }
                                    function struktural() {
                                        var data = document.getElementById("struktur").value;
                                        document.getElementById("tunjangan_struktur").value = data;
                                        sum(); // 赋值后触发求和
                                    }
                                    function sum() {
                                        // 处理空值，默认设为0
                                        var txtFirstNumberValue = parseFloat(document.getElementById('tunjangan_gol').value) || 0;
                                        var txtSecondNumberValue = parseFloat(document.getElementById('tunjangan_fungsi').value) || 0;
                                        var txtThreeNumberValue = parseFloat(document.getElementById('tunjangan_struktur').value) || 0;
                                        var result = txtFirstNumberValue + txtSecondNumberValue + txtThreeNumberValue;
                                        document.getElementById('total').value = result;
                                    }
                                </script>
                                <div class="form-group">
                                    <select name="nama" type="text" class="form-control @error('nama') is-invalid @enderror" value="{{ old('nama') }}">
                                        <option>-- Nama Karyawan --</option>
                                        @foreach ($karyawan as $data)
                                        <option value="{{ $data->nama }}">{{ $data->nama }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">
                                        @error('nama')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group">
                                    <!-- 把onclick改为onchange -->
                                    <select name="gol" id="gol" type="text" onchange="golongan()" class="form-control @error('gol') is-invalid @enderror" value="{{ old('gol') }}">
                                        <option>-- Golongan dan M K G --</option>
                                        @foreach ($golongan as $data)
                                        <option value="{{ $data->tunjangan_gol }}">{{ $data->gol }} | {{ $data->mkg }}</option>
                                        @endforeach
                                    </select>
                                    <div class=" invalid-feedback">
                                        @error('gol')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input name="tunjangan_gol" type="number" id="tunjangan_gol" placeholder="Gaji Pokok" class="form-control @error('tunjangan_gol') is-invalid @enderror" value="{{ old('tunjangan_gol') }}" readonly>
                                    <div class="invalid-feedback">
                                        @error('tunjangan_gol')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group">
                                    <!-- 把onclick改为onchange -->
                                    <select name="jbt_fungsi" id="fungsi" type="text" onchange="fungsional()" class="form-control @error('jbt_fungsi') is-invalid @enderror" value="{{ old('jbt_fungsi') }}">
                                        <option>-- Jabatan Fungsional --</option>
                                        @foreach ($fungsi as $data)
                                        <option value="{{ $data->tunjangan_fungsi }}">{{ $data->jbt_fungsi }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">
                                        @error('gol')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input name="tunjangan_fungsi" type="number" id="tunjangan_fungsi" placeholder="Tunjangan Fungsional" class="form-control @error('tunjangan_fungsi') is-invalid @enderror" value="{{ old('tunjangan_fungsi') }}" readonly>
                                    <div class="invalid-feedback">
                                        @error('tunjangan_fungsi')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group">
                                    <!-- 把onclick改为onchange -->
                                    <select name="jbt_struktur" id="struktur" onchange="struktural()" class="form-control @error('jbt_struktur') is-invalid @enderror" value="{{ old('jbt_struktur') }}">
                                        <option>-- Jabatan Struktural & Fungsional --</option>
                                        @foreach ($struktur as $data)
                                        <option value="{{ $data->tunjangan_struktur }}">{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">
                                        @error('jbt_struktur')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input name="tunjangan_struktur" type="number" id="tunjangan_struktur" placeholder="Tunjangan Struktural" class="form-control @error('tunjangan_struktur') is-invalid @enderror" value="{{ old('tunjangan_struktur') }}" readonly>
                                    <div class="invalid-feedback">
                                        @error('tunjangan_struktur')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input name="total_gaji" type="number" id="total" placeholder="Total Gaji" class="form-control @error('total_gaji') is-invalid @enderror" value="{{ old('total_gaji') }}" readonly>
                                    <div class="invalid-feedback">
                                        @error('total_gaji')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

验证步骤 #

1. 打开模态框，选择任意下拉选项，对应的薪资输入框会自动填充数值
2. 薪资项填充完成后，总和输入框会自动计算并显示结果
3. 即使部分选项未选择（值为空），总和也会正常计算（空值按0处理）

内容的提问来源于stack exchange，提问作者Irfan Chaniago