JavaScript计算器阶乘与欧拉数e计算逻辑补全咨询

前置修正 #

你现有代码存在几处基础问题，需要先修正否则功能无法运行：

• HTML中缺少id为ergebnis的结果展示节点，需补充对应元素
• 注意：原JS代码末尾多了一个多余的})闭合符号，必须删除，否则会触发语法错误，所有按钮功能都无法生效
• 两个计算公式均只需要使用第一个输入框zahl1的非负整数输入值，需增加输入合法性校验，避免输入字母、负数、小数时得到异常结果

阶乘计算逻辑实现 #

按照给定公式Number1! = 1*2*...*Number1，边界规则为0! = 1，补全const F =位置的代码如下（用循环实现，逻辑直观适合新手理解）：

// 输入合法性校验
if (isNaN(zahl1) || zahl1 < 0 || !Number.isInteger(zahl1)) {
    alert("请在第一个输入框输入非负整数");
    return;
}
let F = 1;
for (let i = 2; i <= zahl1; i++) {
    F = F * i;
}

逻辑说明：初始化结果为1，从2开始逐次相乘到输入值，当输入为0或1时循环不执行，结果保持为1，完全匹配阶乘计算规则。

欧拉数近似值计算逻辑实现 #

按照给定公式$e=\sum_{k=0}^{Number1} 1/k!$，补全const e =位置的代码如下（递推计算阶乘避免重复运算，逻辑简单高效）：

// 输入合法性校验
if (isNaN(zahl1) || zahl1 < 0 || !Number.isInteger(zahl1)) {
    alert("请在第一个输入框输入非负整数");
    return;
}
let e = 0;
let factorialCache = 1; // 初始存储0! = 1
e = e + 1 / factorialCache; // 累加k=0时的项 1/0! = 1
for (let k = 1; k <= zahl1; k++) {
    factorialCache = factorialCache * k; // 递推得到k!，无需每次从头计算
    e = e + 1 / factorialCache;
}

逻辑说明：从k=0开始逐次累加每一项1/k!，阶乘值通过前一步结果递推得到，不需要嵌套循环，输入值越大计算结果越接近自然常数e的真实值。

完整可运行参考代码 #

HTML部分 #

<label for="zahl1"></label>
<input id="zahl1" type="text" placeholder="Zahl eingeben">
<label for="zahl2" type="text"></label>
<input id="zahl2" type="text" placeholder="Zahl eingeben"> <br>
<button id="facultyBtn" class="btn btn-info">F</button>
<button id="eulerschBtn" class="btn btn-info">e</button>
<!-- 补充结果展示节点 -->
<p>Ergebnis: <span id="ergebnis"></span></p>

JS部分 #

document.getElementById("facultyBtn").addEventListener("click", () => {
    const zahl1Input = document.getElementById("zahl1");
    const zahl2Input = document.getElementById("zahl2");
    const zahl1 = Number(zahl1Input.value);
    const zahl2 = Number(zahl2Input.value);

    // 阶乘计算逻辑
    if (isNaN(zahl1) || zahl1 < 0 || !Number.isInteger(zahl1)) {
        alert("Bitte geben Sie eine nicht-negative Ganzzahl in das erste Eingabefeld ein");
        return;
    }
    let F = 1;
    for (let i = 2; i <= zahl1; i++) {
        F *= i;
    }

    let ergebnis = F;
    const ergebnisInput = document.getElementById("ergebnis");
    ergebnisInput.innerText = ergebnis.toString();
})

document.getElementById("eulerschBtn").addEventListener("click", () => {
    const zahl1Input = document.getElementById("zahl1");
    const zahl2Input = document.getElementById("zahl2");
    const zahl1 = Number(zahl1Input.value);
    const zahl2 = Number(zahl2Input.value);

    // 欧拉数计算逻辑
    if (isNaN(zahl1) || zahl1 < 0 || !Number.isInteger(zahl1)) {
        alert("Bitte geben Sie eine nicht-negative Ganzzahl in das erste Eingabefeld ein");
        return;
    }
    let e = 0;
    let factorialCache = 1;
    e += 1 / factorialCache;
    for (let k = 1; k <= zahl1; k++) {
        factorialCache *= k;
        e += 1 / factorialCache;
    }

    let ergebnis = e;
    const ergebnisInput = document.getElementById("ergebnis");
    ergebnisInput.innerText = ergebnis.toString();
})

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