为什么 onClick() 没有响应
[英]Why is the onClick() not responding
问题描述
So I was creating a simple calculator for Area and perimeter of circles.
所以我正在为圆的面积和周长创建一个简单的计算器。 I stored the code in JavaScript and called it on the onClick() , however, the innerHtml is not changing at all.我将代码存储在 JavaScript 并在onClick()上调用它，但是， innerHtml根本没有改变。
calculate(radius) { cal_area = String(Math.PI * (radius * radius)); cal_perimeter = String(Math.PI * (radius * 2)); document.getElementById("Area").innerHTML = cal_area; document.getElementById("Perimeter").innerHTML = cal_perimeter; }
<.DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Circles</title> <script src="brain.js"></script> </head> <body> <form> <input type="number" id="Radius" placeholder="Radius"> <br> <input type="submit" value="Calculate" onclick="calculate(radius = document.getElementById("Radius");value;);"> </form> <br> <p id="Area">test</p> <br> <p id="Perimeter">test</p> </body> </html>
5 个解决方案
解决方案1
2 2020-07-16 20:11:48
I'd suggest using something more along the lines of the following.我建议使用更多类似以下内容的内容。 You need to use singly quotes around Radius because you already have a double quote before the word calculate, so it's cutting short.您需要在 Radius 周围使用单引号，因为在计算一词之前已经有一个双引号，所以它很短。 You also don't need to assign a variable in your HTML, just pass through document.getElementById('Radius').value您也不需要在 HTML 中分配变量，只需通过 document.getElementById('Radius').value
<input type="submit" value="Calculate" onclick="calculate(document.getElementById('Radius').value)">
Also you should include the word function before your function您还应该在 function 之前包含单词 function
function calculate(radius){
cal_area = String(Math.PI * (radius * radius));
cal_perimeter = String(Math.PI * (radius * 2));
document.getElementById("Area").innerHTML = cal_area;
document.getElementById("Perimeter").innerHTML = cal_perimeter;
}
解决方案2
0 2020-07-16 20:09:14
Instead of writing "Radius" with double quotes type 'Radius' with single quotes in your onclick .而不是在onclick中用双引号输入带单引号的"Radius" 'Radius' 。
解决方案3
0 2020-07-16 20:16:24
There is bit of refactoring is needed in your code.您的代码中需要进行一些重构。 Eg.例如。 "double quotes" and "value assignment". “双引号”和“赋值”。 I have modified your code.我已经修改了你的代码。 Take a look below看看下面
function calculate() { event.preventDefault(); var radius = document.getElementById("Radius").value; var cal_area = String(Math.PI * (radius * radius)); var cal_perimeter = String(Math.PI * (radius * 2)); document.getElementById("Area").innerHTML = cal_area; document.getElementById("Perimeter").innerHTML = cal_perimeter; }
<.DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Circles</title> <script src="brain.js"></script> </head> <body> <form> <input type="number" id="Radius" placeholder="Radius"> <br> <input type="submit" value="Calculate" onclick="calculate()"> </form> <br> <p id="Area">test</p> <br> <p id="Perimeter">test</p> </body>
If you see above code, I have made following changes如果您看到上面的代码，我做了以下更改
- I added
event.preventDefault();我添加了event.preventDefault();in the function.在 function 中。 This will stop page refresh on click.这将在单击时停止页面刷新。 - I removed the value assignment from the HTML.我从 HTML 中删除了赋值。 I changed
onclick="calculate(radius = document.getElementById("Radius").value;);"我改变了onclick="calculate(radius = document.getElementById("Radius").value;);"toonclick="calculate()".到onclick="calculate()"。 - I accessing the value of
radiusin function itself.我访问 function 本身的radius值。var radius = document.getElementById("Radius").value;
解决方案4
0 2020-07-16 20:26:36
you are performing an assignment within the call, and it is a horror it must be done in the function itself.您正在通话中执行任务，这很恐怖，必须在 function 本身中完成。
in this example i had added "event.preventDefault()" in this way you can stop the page refresh.在这个例子中，我添加了“event.preventDefault()”，这样你就可以停止页面刷新。
function calculate(radius) { var cal_area = String(Math.PI * (radius * radius)); var cal_perimeter = String(Math.PI * (radius * 2)); document.getElementById("Area").innerText = cal_area; document.getElementById("Perimeter").innerText = cal_perimeter; };
<.DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Circles</title> <script src="brain.js"></script> </head> <body> <form> <input type="number" id="Radius" placeholder="Radius"> <br> <input type="submit" value="Calculate" onclick="calculate(document.getElementById('Radius').value)"> </form> <br> <p id="Area">test</p> <br> <p id="Perimeter">test</p> </body> </html>
解决方案5
-1 2020-07-16 20:23:08
function calculate(radius) { event.preventDefault() var cal_area = String(Math.PI * (radius * radius)); var cal_perimeter = String(Math.PI * (radius * 2)); var Area =document.getElementById("Area").innerText = cal_area; var Peri=document.getElementById("Perimeter").innerText = cal_perimeter; };
<.DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Circles</title> <script src="brain.js"></script> </head> <body> <form> <input type="number" id="Radius" placeholder="Radius" value="0"> <br> <input type="submit" value="Calculate" onclick="calculate(document.getElementById('Radius').value)"> </form> <br> <p id="Area">test</p> <br> <p id="Perimeter">test</p> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.