如何实现按回车键触发税费计算函数calculer()

你写的代码不生效有三个核心问题：

• 回车事件的回调里调用的是validatePass()，但你实际实现的计算函数叫calculer()，函数名不匹配根本不会执行计算逻辑
• 你的calculer()函数本身有笔误，把document漏写拼成了ment，就算事件触发了执行到这行也会直接抛错
• 直接给body绑定keydown事件时，如果焦点在输入框内，部分浏览器会优先触发输入框的默认行为，不会冒泡到body的监听上

最符合使用习惯的逻辑是：用户在金额输入框输完数值后按回车，直接触发计算，不需要焦点在按钮或者页面其他位置，也不会出现误触。
修复后的完整代码如下：

<html>
<head>
    <title>Page Title</title>
    <meta charset="UTF-8" />
    <script src="javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script>
        function calculer() {
            const montant = Number(document.getElementById("montant").value);
            const taxe = (montant * 14.975) / 100;
            const total = (montant * 114.975) / 100;

            // 修正原代码笔误：将ment补全为document
            document.getElementById("taxe").value = taxe.toFixed(2) + " $";
            document.getElementById("total").value = total.toFixed(2) + " $";
        }

        // 等页面DOM加载完成后再绑定事件
        window.onload = function () {
            const montantInput = document.getElementById("montant");
            montantInput.addEventListener("keydown", function (e) {
                // 兼容新旧API判断是否按下回车键
                const isEnter = e.key === "Enter" || e.keyCode === 13;
                if (isEnter) {
                    e.preventDefault(); // 阻止输入框回车的默认行为
                    calculer(); // 调用正确的计算函数
                }
            })
        }
    </script>
</head>
<body>
    Montant:
    <br />
    <input type="number" id="montant" />
    <br /><br />
    Taxe:
    <br />
    <input type="text" id="taxe" placeholder="$$$$$$$$$$$$$$$$$$$$$$" readonly />
    <br /><br />
    Résultat:
    <br />
    <input type="text" id="total" placeholder="$$$$$$$$$$$$$$$$$$$$$$" readonly />
    <br /><br />
    <button type="button" onclick="calculer()">Calculer</button>
</body>
</html>

• 代码里加了toFixed(2)处理计算结果，避免出现多位小数的情况，符合金额显示的常规逻辑
• 如果你需要全局任意位置按回车都触发计算，只要把keydown监听从金额输入框挪到document上即可，不过这种场景很容易出现误触，不推荐使用

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