入门计算机作业：修复简单计算器的HTML与JavaScript代码问题

可复现的错误点 #

• JavaScript 大小写敏感，你所有代码里的parsefloat拼写错误，正确写法为parseFloat
• 除加法外的三个运算结果提示文案错误，均误用了代表“和”的sum，且文案末尾未加空格会导致和数值粘连
• 除法函数ef()：定义了变量e、f但未赋值，错误将输入值赋值给了未定义的变量c、d，运算时使用未赋值的e、f会返回NaN
• 乘法函数gh()：定义了变量g、h但未赋值，错误将输入值赋值给了未定义的变量c、d，运算时误用了不存在的变量f，会直接抛出引用错误
• HTML 表单标签嵌套错误：加法模块结束后提前闭合了</form>，后面三个模块不属于任何表单，且末尾多了一个冗余的</form>标签

修复后完整代码 #

convert.js 代码 #

function ab() {
    var a = parseFloat(document.getElementById("txt1").value);
    var b = parseFloat(document.getElementById("txt2").value);
    var r = a + b;
    document.getElementById("p1").innerHTML = "两数之和为：" + r;
}

function cd() {
    var c = parseFloat(document.getElementById("txt3").value);
    var d = parseFloat(document.getElementById("txt4").value);
    var r2 = c - d;
    document.getElementById("p2").innerHTML = "两数之差为：" + r2;
}

function ef() {
    var e = parseFloat(document.getElementById("txt5").value);
    var f = parseFloat(document.getElementById("txt6").value);
    // 补充除数为0的兼容判断
    if (f === 0) {
        document.getElementById("p3").innerHTML = "除数不能为0，请重新输入";
        return;
    }
    var r3 = e / f;
    document.getElementById("p3").innerHTML = "两数之商为：" + r3;
}

function gh() {
    var g = parseFloat(document.getElementById("txt7").value);
    var h = parseFloat(document.getElementById("txt8").value);
    var r4 = g * h;
    document.getElementById("p4").innerHTML = "两数之积为：" + r4;
}

HTML 代码 #

<html>
<head>
<script src="convert.js"></script>
</head>
<body>
<form>
    <h1> 简易加法计算器 </h1>
    请输入两个数字进行加法运算：
    <input type="text" id="txt1" value="10"/>
    <input type="text" id="txt2" value="10"/>
    <br/>
    <input type="button" id ="btn1" value="相加" onclick = "ab()" />
    <p id="p1"></p>

    <h1> 简易减法计算器 </h1>
    请输入两个数字进行减法运算：
    <input type="text" id="txt3" value="10"/>
    <input type="text" id="txt4" value="10"/>
    <br/>
    <input type="button" id ="btn2" value="相减" onclick = "cd()" />
    <p id="p2"></p>

    <h1> 简易除法计算器 </h1>
    请输入两个数字进行除法运算：
    <input type="text" id="txt5" value="10"/>
    <input type="text" id="txt6" value="11"/>
    <br/>
    <input type="button" id ="btn3" value="相除" onclick = "ef()" />
    <p id="p3"></p>

    <h1> 简易乘法计算器 </h1>
    请输入两个数字进行乘法运算：
    <input type="text" id="txt7" value="10"/>
    <input type="text" id="txt8" value="10"/>
    <br/>
    <input type="button" id ="btn4" value="相乘" onclick = "gh()" />
    <p id="p4"></p>
</form>
</body>
</html>

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