Laravel Blade视图调用discount函数报TypeError问题求助

问题原因 #

• 全局命名冲突：你表单中存在 name="discount" 的输入框，浏览器会自动将带name属性的DOM元素挂载到window全局对象上，覆盖了你定义的同名discount函数，因此调用时会提示该变量不是函数。
• 函数内部变量重名：函数内部声明了和函数同名的discount变量，存在变量提升的潜在冲突风险。
• 你在普通HTML文件中可正常运行大概率是加载顺序差异，或者不存在其他同名全局变量干扰。

解决方法 #

方案1：修改命名+保留内联事件（简单快速） #

1. 将函数名修改为不会冲突的名称，同时修改函数内部变量名
2. 同步修改输入框上的内联事件调用名

调整后输入框代码：

<div class="form-group col-md-2">
    <label for="sale_price">Precio de Venta</label>
    <input type="number"  pattern="[0-9]+([\.,][0-9]+)?" step="0.01" name="sale_price" class="form-control" id="saleP" onkeyup="calculateDiscount()" onchange="calculateDiscount();" >
</div>
<div class="form-group col-md-3">
    <label for="discount_percentage">Porcentaje de descuento (%)</label>
    <input type="number" name="discount_percentage" class="form-control" id="discountP" onkeyup="calculateDiscount();" onchange="calculateDiscount();">
</div>

调整后脚本代码：

function calculateDiscount(){
    // 加默认值0避免空值计算出NaN
    const price = document.getElementById('saleP').value || 0;
    const percentage = document.getElementById('discountP').value || 0;
    const discountVal = (price * percentage) / 100;
    // 保留两位小数符合金额场景
    document.getElementById('discountAmount').value = discountVal.toFixed(2); 
}

方案2：改用事件监听（更稳妥，无全局冲突） #

完全移除输入框上的onkeyup、onchange内联事件，改用事件绑定的方式，不需要暴露全局函数，从根源避免命名冲突：

document.addEventListener('DOMContentLoaded', function() {
    const salePInput = document.getElementById('saleP');
    const discountPInput = document.getElementById('discountP');
    const discountAmountInput = document.getElementById('discountAmount');

    function calculateDiscount() {
        const price = Number(salePInput.value) || 0;
        const percentage = Number(discountPInput.value) || 0;
        const discountVal = (price * percentage) / 100;
        discountAmountInput.value = discountVal.toFixed(2);
    }

    salePInput.addEventListener('keyup', calculateDiscount);
    salePInput.addEventListener('change', calculateDiscount);
    discountPInput.addEventListener('keyup', calculateDiscount);
    discountPInput.addEventListener('change', calculateDiscount);
});

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