Javascript 函数仅适用于我的 foreach laravel 循环中的第一个表行

Question

我正在使用 javascript 函数输入一个数字并在 boostrap 模态中计算后自动显示结果。

如果单击第一行的请求按钮，javascript 函数可以正常工作。但是当我点击第二行和后续行的请求按钮时，它不起作用。

我不确定问题是模态内部的数据还是模态外部的数据

我尝试使用 getElementsByClassName 而不是 ID，但它仍然无法正常工作。

<script>
    function mult(value) { // === calculate the profit and the total amount due === //
        var x = value * 15 / 100;
        var y = parseFloat(x)+parseInt(value);

        document.getElementById("profit").value = x;
        document.getElementById("total").value = y;
    }
</script>

<table id="table1">
    <thead>
    <tr>
        <th>#</th>
        <th>Full Name</th>
        <th>Requests</th>
    </tr>
    </thead>
    <tbody>
    @foreach($Clients as $Client)
        <tr id="foreach-row">
            <td>{{ $Client->full_name }}</td>
            <td>
                <div class="buttons">
                    <a class="btn icon btn-secondary" data-toggle="modal"
                       data-target="#LoanRequestModel-{{ $Client->id }}">
                        Request
                    </a>
                </div>
            </td>
        </tr>
        {{-- =========== MODEL - NEW REQUEST  ===============--}}
        <div class="modal" id="LoanRequestModel-{{ $Client->id }}" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLongTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"><b>REQUEST</b></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i data-feather="x"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('finance.storeRequest', $Client->id) }}" method="post"
                              class="loanrequest_form" enctype="multipart/form-data">
                            {{ csrf_field() }}

                            <label>Full name</label>
                            <div class="form-group">
                                <input type="text" name="creditor_full_name"
                                       class="form-control" value="{{ $Client->full_name }}" >
                            </div>
                            <div>
                                <label>Amount</label>
                                <div class="form-group">
                                    <input  type="number" name="loan_amount"
                                            class="form-control" onkeyup="mult(this.value);" >
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-5">
                                    <label>Interest Rate</label>
                                    <div class="input-group mb-3">
                                        <label class="input-group-text" for="inputGroupSelect01">Choose</label>
                                        <select class="form-select rate"name="interest_rate" >
                                            <option value="15" selected>15%</option>
                                            <option value="20">20%</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <label>Profit</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="profit" class="form-control" name="profit"
                                               aria-label="Amount">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <label>Total Amount due</label>
                                <div class="input-group mb-3">
                                    <input type="text" id="total" class="form-control" name="amount_due"
                                           aria-label="Amount">
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-outline-secondary ml-1" >
                                        <i class="bx bx-check d-block d-sm-none"></i>
                                        <span class="d-none d-sm-block">Submit</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
    </tbody>
</table>

Answer 1

问题 - 正如其他人在上面所说 - 是当您使用以下方法使每个模式的 ID 唯一时：

id="LoanRequestModel-{{ $Client->id }}"

在您的循环中，当生成每个模式时，您使用的字段具有非唯一 ID：

type="text" id="profit" 
type="text" id="total"

你最好让这些 ID 不唯一，就像你对模态 ID 所做的那样：

type="text" id="profit-{{ $Client->id }}"
type="text" id="total-{{ $Client->id }}"

并添加 ID 到您需要在脚本中使用但目前没有 ID 的字段：

type="number" id="loan_amount-{{ $Client->id}}" name="loan_amount"

然后，当您在此处触发 keyup 上的 javascript 时：

onkeyup="mult(this.value);"

而不是传递字段的值，而是传递客户端ID：

onkeyup="mult({{ $Client->id);"

然后你只需要调整你的javascript（因为它不再被传递loan_amount），以便它首先获得loan_amount，然后是它需要的其他零碎，最后将它们返回到正确的位置：

<script>
    function mult(id) { // === this is now receiving the ID, not a value so first we need to get the value for the relevant field *emphasized text*== //
        var value = document.getElementById("loan_amount-" + id).value
        var x = value * 15 / 100;
        var y = parseFloat(x)+parseInt(value);
        document.getElementById("profit" + id).value = x;
        document.getElementById("total" + id).value = y;
    }
</script>