Tulis Semula Tajuk: Tidak dapat bertindak balas terhadap fungsi Sum

Question

Saya telah mendayakan ciri OnClick menggunakan JavaScript. Tetapi semasa proses akhir, iaitu penjumlahan, kod yang saya masukkan tidak bertindak balas.

<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">
                            <!--on clik on change javascript-->
                            <script type="text/javascript">
                                function golongan() {
                                    var data = document.getElementById("gol").value;
                                    document.getElementById("tunjangan_gol").value = data;
                                }

                                function fungsional() {
                                    var data = document.getElementById("fungsi").value;
                                    document.getElementById("tunjangan_fungsi").value = data;
                                }

                                function struktural() {
                                    var data = document.getElementById("struktur").value;
                                    document.getElementById("tunjangan_struktur").value = data;
                                }

                                function sum() {
                                    var txtFirstNumberValue = document.getElementById('tunjangan_gol').value;
                                    var txtSecondNumberValue = document.getElementById('tunjangan_fungsi').value;
                                    var txtThreeNumberValue = document.getElementById('tunjangan_struktur').value;
                                    var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThreeNumberValue);
                                    if (!isNaN(result)) {
                                        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">
                                <select name="gol" id="gol" type="text" onclick="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" onclick="sum()" 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">
                                <select name="jbt_fungsi" id="fungsi" type="text" onclick="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" onclick="sum()" 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">
                                <select name="jbt_struktur" id="struktur" onclick="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" onclick="sum()" 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" onclick="sum()" 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>

Ada apa-apa yang saya terlepas? Saya rasa ini betul, mungkin sisipan kod saya salah...

Terima kasih kerana meluangkan masa untuk menyemak dan menjawab soalan saya.

Answer 1

Mula-mula gunakan log konsol untuk menyemak nilai anda, kemudian konsol juga jumlah dan kemudian tolak ke medan input jumlah. Setakat yang saya tahu kod anda baik dan berjalan pada komputer saya sebagai html mentah. Jadi anda mungkin telah memilih id yang salah, sila semak.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
    <input name="num1" type="number" id="num1" onkeyup="sum()" type="text" placeholder="" class="form-control" value="" />
    <input name="num1" type="number" id="num3" onkeyup="sum()" type="text" placeholder="" class="form-control" value="" />
    <input name="num1" type="number" id="num2" onkeyup="sum()" type="text" placeholder="" class="form-control" value="" />
    <input name="num1" type="number" id="total" onkeyup="sum()" type="text" placeholder="" class="form-control" value="" />

    <script>
        function sum() {
            var txtFirstNumberValue = document.getElementById("num1").value;
            var txtSecondNumberValue = document.getElementById("num2").value;
            var txtThreeNumberValue = document.getElementById("num3").value;
            var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThreeNumberValue);
            if (!isNaN(result)) {
                document.getElementById("total").value = result;
            }
        }
    </script>
</body>