功能问题
[英]Issues with function
问题描述
我是新手。 我正在做计算三角形面积的练习，但我遇到了麻烦。 当我运行程序进行计算时，错误显示。 解决方案总是显示0。这是我的代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Square Triangle</title>
</head>
<body>
<p id="solution"></p>
<input type="text" name="number1" id="number1" placeholder="Enter first value" />
<input type="text" name="number2" id="number2" placeholder="Enter second value" />
<input type="text" name="number3" id="number3" placeholder="Enter third value" />
<input type="button" value="Click to calc" onclick="calculateTriangleSquare()"/>
<script>
const a = document.getElementById("number1").value;
const b = document.getElementById("number2").value;
const c = document.getElementById("number3").value;
function calculateTriangleSquare() {
let p = (a + b + c) / 2;
let S = Math.sqrt(p*(p-a)*(p-b)*(p-c));
document.getElementById("solution").innerHTML = S;
}
</script>
</body>
</html>
如何修复它。 请帮我。 非常感谢。 对不起我的英语不好。
3 个解决方案
解决方案1
1 已采纳 2020-10-02 14:59:24
你有两个错误，
- 调用函数时，您没有获取输入值。 您不想访问函数之外的值。
- 您没有将值解析为整数。 它们被连接然后除以 2，所以
p将等于'000' / 2 = 0。
function calculateTriangleSquare() { const a = parseInt(document.getElementById("number1").value, 10); const b = parseInt(document.getElementById("number2").value, 10); const c = parseInt(document.getElementById("number3").value, 10); let p = (a + b + c) / 2; let S = Math.sqrt(p * (p - a) * (p - b) * (p - c)); document.getElementById("solution").innerHTML = S; }
<p id="solution"></p> <input type="text" name="number1" id="number1" placeholder="Enter first value" /> <input type="text" name="number2" id="number2" placeholder="Enter second value" /> <input type="text" name="number3" id="number3" placeholder="Enter third value" /> <input type="button" value="Click to calc" onclick="calculateTriangleSquare()" />
如果您的值代表一个向量，您可以将它们作为表单值数组传递。
const solution = document.querySelector('#solution'); const calculateTriangleSquare = button => { const argv = button.closest('form')['argv[]'], [ a, b, c ] = [ ...argv ].map(input => parseInt(input.value, 10)), p = (a + b + c) / 2; solution.innerHTML = Math.sqrt(p * (p - a) * (p - b) * (p - c)); }
.info label { font-weight: bold; }
<h1>Calcuate Square Triangle</h1> <form name="calulate-triangle-square" onsubmit="return false;"> <input type="number" name="argv[]" value="3"> <input type="number" name="argv[]" value="4"> <input type="number" name="argv[]" value="5"> <button onclick="calculateTriangleSquare(this)">Calculate</button> </form> <br> <div class="info"> <label>Solution:</label> <span id="solution"></span> </div>
解决方案2
0 2020-10-02 15:01:36
问题是当页面完成加载时，您从输入中获取值。 在其中任何一个中输入值后，a、b 和 c 的值都不会更新。 您应该从 calculateTriangleSquare 函数的输入中获取值并将它们解析为数字：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Square Triangle</title>
</head>
<body>
<p id="solution"></p>
<input type="text" name="number1" id="number1" placeholder="Enter first value" />
<input type="text" name="number2" id="number2" placeholder="Enter second value" />
<input type="text" name="number3" id="number3" placeholder="Enter third value" />
<input type="button" value="Click to calc" onclick="calculateTriangleSquare()" />
<script>
const aInput = document.getElementById('number1');
const bInput = document.getElementById('number2');
const cInput = document.getElementById('number3');
function calculateTriangleSquare() {
const [a, b, c] = [aInput, bInput, cInput].map((el) => +el.value);
const p = (a + b + c) / 2;
const S = Math.sqrt(p * (p - a) * (p - b) * (p - c));
document.getElementById('solution').innerHTML = S;
}
</script>
</body>
</html>
解决方案3
0 2020-10-02 15:11:02
你的代码有一些小问题，但我会向你解释，
- 您的 a,b,c 不能是 0 以外的其他值，因为它们首先是常量，其次，一旦调用函数，您就不会更改 a,b,c 的值，但只能在调用它之前。 调用函数时需要刷新这些值。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Square Triangle</title> </head> <body> <p id="solution"></p> <input type="text" name="number1" id="number1" placeholder="Enter first value" /> <input type="text" name="number2" id="number2" placeholder="Enter second value" /> <input type="text" name="number3" id="number3" placeholder="Enter third value" /> <input type="button" value="Click to calc" onclick="calculateTriangleSquare()"/> <script> function calculateTriangleSquare() { let a = document.getElementById("number1").value; let b = document.getElementById("number2").value; let c = document.getElementById("number3").value; let p = (a + b + c) / 2; let S = Math.sqrt(p*(pa)*(pb)*(pc)); document.getElementById("solution").innerHTML = S; } </script> </body> </html>
干杯
JavaScript函数激活问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.