如何为JavaScript圆面积计算器功能创建结果输出显示框

代码问题梳理 #

• 函数执行提前终止：你在calc函数中把return area写在了DOM操作代码之前，return语句会直接结束函数运行，后续给输出框赋值的代码永远不会被执行。
• 表单默认行为未拦截：form表单提交默认会刷新页面，即使修复了上述问题，计算结果刚显示页面就会重置，看不到输出内容。
• 存在冗余无用代码：函数内声明的calculate变量没有被使用，output标签上的onsubmit="result()"属性无效，属于冗余内容。

修正后完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circle Area Calculator</title>
</head>
<body>
    <fieldset><h3><i>Enter radius of a circle:</i></h3>
        <form name="circleForm" onsubmit="calc(event)">
            <label for="name">Enter a number:</label><br>
            <input type="number" name="radius" id="radius" placeholder="radius" required><br>
            <button type="submit">Calculate Area</button>
            <button type="reset">Reset value</button>
        </form>
        <div id="result">
            <output name="result"></output>
        </div>
    </fieldset>
</body>
<script>
    function calc(e) {
        // 阻止表单默认提交刷新页面的行为
        e.preventDefault();
        var radius = document.forms.circleForm.elements.namedItem("radius").value;
        // 可用Math.PI代替3.14获得更精准的计算结果
        var area = (radius**2)*Math.PI;
        // 把结果写入页面输出区域
        document.getElementById("result").innerHTML = `圆的面积为：${area.toFixed(2)}`;
    }
</script>
</html>

核心修改说明 #

• 给onsubmit绑定的calc函数传入了event事件对象，在函数内调用e.preventDefault()拦截默认提交行为
• 移除了无用的return语句和未使用的calculate变量
• 新增了toFixed(2)方法保留两位小数，优化结果展示效果
• 删除了output标签上无效的onsubmit属性

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