Laravel foreach循环中JavaScript函数仅对表格首行生效问题求助

问题根因 #

你在@foreach循环里为每个模态框的利润、总额输入框都设置了相同的id="profit"、id="total"，而HTML规范中id属性必须全局唯一，document.getElementById默认只会返回页面中第一个匹配id的元素，所以只有第一个模态框的计算能正常生效，后续模态框触发计算时，值还是写到了第一个隐藏的模态框输入框里，表面看起来就是没生效。
你之前换成getElementsByClassName没有解决，是因为没有限定查找范围为当前打开的模态框，直接全局查找还是会优先匹配第一个元素。

修复方案 #

1. 修改JS计算函数 #

将原函数改为接收当前输入框元素作为参数，通过元素上下文查找当前模态框内的对应输入项，避免全局查找：

function mult(inputEl) { 
    // 定位当前输入框所属的表单（限定查找范围）
    const currentForm = inputEl.closest('form');
    // 读取输入值和选择的利率，兼容空输入场景
    const loanAmount = parseFloat(inputEl.value) || 0;
    const interestRate = parseInt(currentForm.querySelector('.rate').value) || 15;
    // 计算逻辑
    const profit = loanAmount * interestRate / 100;
    const totalDue = loanAmount + profit;
    // 仅给当前表单内的输入框赋值，保留两位小数更符合金额类场景展示要求
    currentForm.querySelector('input[name="profit"]').value = profit.toFixed(2);
    currentForm.querySelector('input[name="amount_due"]').value = totalDue.toFixed(2);
}

2. 修改金额输入框的触发逻辑 #

把金额输入框的onkeyup调用改为传入当前元素本身：

<input  type="number" name="loan_amount"
        class="form-control" onkeyup="mult(this);" >

3. 可选优化：利率切换自动重算 #

给利率下拉框添加change事件，切换利率时自动重新计算对应金额：

<select class="form-select rate" name="interest_rate" onchange="mult(this.closest('form').querySelector('input[name=loan_amount]'))">
    <option value="15" selected>15%</option>
    <option value="20">20%</option>
</select>

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