JavaScript-如何为计算器函数创建输出框？-堆栈溢出

顺晟科技

2022-10-19 13:07:26

187

我完全是Javascript的初学者，正在尝试创建一个简单的程序来计算圆的面积。我目前被困在如何创建一个包含变量区域的输出框上。如果这是一个愚蠢的问题，我很抱歉，但我非常感谢任何形式的帮助！

<!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()">
            <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" onsubmit="result()">

            </output>
        </div>
    </fieldset>
</body>
<script>
    function calc() {
        var radius = document.forms.circleForm.elements.namedItem("radius").value;
        var area = (radius**2)*3.14
        var calculate;
        return area

        document.getElementById("result").innerHTML = area;
    }
</script>
</html>

顺晟科技：

这边

演示

向按钮添加事件侦听器，然后从那里运行calc函数。

使用event.preventdefault()将阻止浏览器提交表单和刷新页面。

设置结果div是正确的做法，但您应该将其放在函数返回值之后，这将阻止其执行。

上一篇：JavaScript-fixed菜单下一篇：JavaScript-拖动divs时

网站建设

Html

JavaScript-如何为计算器函数创建输出框？-堆栈溢出