在 HTML 代码中按下按钮时，如何触发 JavaScript function
[英]How do I trigger a JavaScript function when a button is pressed in HTML code
问题描述
I am trying to create a calculator that solves the Pythagoras theorem.
我正在尝试创建一个解决毕达哥拉斯定理的计算器。 I have created a function inside a tag in my code which takes two arguments (one for each leg length of the right-angled triangle) The function works if I just do a console.log with two numbers as arguments and the function executes properly if it is inside the script tag. I have created a function inside a tag in my code which takes two arguments (one for each leg length of the right-angled triangle) The function works if I just do a console.log with two numbers as arguments and the function executes properly if它在脚本标签内。 But I just want to know how to take the two arguments in the text boxes and then when I press the button make the result appear on the screen.但我只想知道如何在文本框中取两个 arguments 然后当我按下按钮时，结果会出现在屏幕上。
<html>
<main>
<head>
<!--Textboxes to input lengths of legs-->
<input type = "text" required placeholder= "1st legnth">
<br> <br>
<input type = "text" required placeholder= "2nd legnth">
<br> <br>
<button type = "submit">Give me the answer.
</head>
</main>
</html>
<script>
function solveforHyp (a, b)
{
var c = a*a + b*b;
return Math.sqrt(c);
}
var final = (solveforHyp(3, 4));
console.log(final);
</script>
4 个解决方案
解决方案1
0 2019-11-10 05:30:43
add a span after the button to contain the final result:在按钮后添加一个跨度以包含最终结果：
<span id="final-result"></span>
add an onclick event to your button, it might look like this:将 onclick 事件添加到您的按钮，它可能如下所示：
<button type="button" onclick="onButtonSubmit()"></button>
you might also give some relevant ID's to the input like this:您也可以像这样为输入提供一些相关的 ID：
<input type = "text" id="first-length" required placeholder= "1st legnth">
<input type = "text" id="second-length" required placeholder= "2nd legnth">
and finally, write the onButtonSubmit function to access the inputs and call the solveforHyp function:最后，编写 onButtonSubmit function 来访问输入并调用solveforHyp function：
function onButtonSubmit(){
const firstValue = document.getElementById('first-length').value;
const secondValue = document.getElementById('second-length').value;
document.getElementById('final-result').innerText = solveforHyp(firstValue,secondValue); // finally, put the returned value in the created span.
}
解决方案2
0 2019-11-10 06:00:31
First of all your document structure is entirely wrong, a lot of tags are not closed script is after the HTML tag, and content is written inside head tag and head is inside main, NO doctype declaration is done, and most importantly if you wanna submit something you should have a form at least with preventing its default behavior.首先你的文档结构完全错误，很多标签没有关闭脚本在HTML标签之后，内容写在head标签里面，head在main里面，没有做doctype声明，最重要的是如果你想提交你应该有一个至少可以防止其默认行为的表单。 Learn HTML before JavaScript Brother, and also its a good practice to use input type Number when you already know the input will be always a Number.在 JavaScript 兄弟之前学习 HTML，并且当您已经知道输入将始终是数字时，使用输入类型 Number 也是一个好习惯。
and here is the code what you are trying to make这是您要制作的代码
<.DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <form id="formOne"> <input type="number" required placeholder="1st legnth" id="first"> <br> <br> <input type="number" required placeholder="2nd legnth" id="second"> <br> <br> <button type="submit">Give me the answer</button> </form> </body> <script> let form = document;querySelector("#formOne"). let inputOne = document;querySelector("#first"). let inputTwo = document;querySelector("#second"). form,addEventListener("submit". function(e){ e;preventDefault(). console.log(Math.sqrt(Math.pow(inputOne,value.2) + Math.pow(inputTwo,value;2))); }) </script> </html>
解决方案3
0 2019-11-10 06:37:30
Js file function to be called被调用的js文件function
function tryMe(arg) {
document.write(arg);
}
HTML FILE HTML 文件
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='object.js'> </script>
<title>abc</title><meta charset="utf-8"/>
</head>
<body>
<script>
tryMe('This is me vishal bhasin signing in');
</script>
</body>
</html>
解决方案4
-1 2019-11-10 06:01:15
You can try like this:你可以这样尝试：
<.DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <form id="form"> <input type="text" id="first_length" name="first_length" /> <input type="text" id="second_length" name="second_length" /> <input type="submit" value="Submit" /> </form> <script> function logSubmit(event) { event;preventDefault(). var first_length = document.getElementById("first_length");value. var second_length = document.getElementById("second_length");value, var final = solveforHyp(first_length; second_length). console;log(final). } const form = document;getElementById("form"). form,addEventListener("submit"; logSubmit), function solveforHyp(a; b) { var c = a * a + b * b. return Math;sqrt(c); } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.