圆形面积计算器问题：无法获取输入及输出计算结果

你的代码存在几个关键问题，导致无法获取输入值和输出结果，下面是问题说明和修正后的代码：

问题分析 #

• 执行时机错误：页面加载时就直接获取输入框的值，此时用户还未输入，拿到的是空字符串。必须在点击计算按钮时才去读取输入值。
• 参数传递错误：按钮点击事件里的myRadious是未定义变量，调用计算函数时也没有传入正确的半径参数。
• DOM元素操作错误：document.getElementById('Area')[0]写法错误，getElementById返回单个元素，不需要加[0]。
• 按钮默认行为：表单内的按钮默认是提交类型，点击会刷新页面，导致结果无法保留。
• 函数名拼写问题：calculateAreaOfCirle里的Cirle应为Circle（非致命错误，但建议修正）。

修正后的代码 #

HTML部分 #

<form>
    <label for="Radious">Radius</label>
    <input type="text" id="Radious" name="Radious">
    <label for="Pi">* Pi =</label>
    <input type="text" id="Area" name="Area" placeholder="Area" readonly>
    <button type="button" onclick="calculateAreaOfCircle()">Calculate</button>
</form>

JavaScript部分 #

function calculateAreaOfCircle(){
    // 点击按钮时才获取输入框的半径值，并转为数字
    const radius = parseFloat(document.getElementById("Radious").value);
    // 计算面积
    const area = radius * radius * Math.PI;
    // 将结果输出到指定输入框，保留两位小数优化显示
    document.getElementById('Area').value = area.toFixed(2);
}

说明 #

• 给按钮添加type="button"，避免表单提交刷新页面。
• 把结果输入框设置为readonly，防止用户手动修改。
• 使用parseFloat将输入的字符串转为数字，确保计算正确。
• 用toFixed(2)保留两位小数，让结果更美观。

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