[英]How do I trigger a JavaScript function when a button is pressed in HTML code
我正在尝试创建一个解决毕达哥拉斯定理的计算器。 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它在脚本标签内。 但我只想知道如何在文本框中取两个 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>
在按钮后添加一个跨度以包含最终结果：
<span id="final-result"></span>
将 onclick 事件添加到您的按钮，它可能如下所示：
<button type="button" onclick="onButtonSubmit()"></button>
您也可以像这样为输入提供一些相关的 ID：
<input type = "text" id="first-length" required placeholder= "1st legnth">
<input type = "text" id="second-length" required placeholder= "2nd legnth">
最后，编写 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.
}
首先你的文档结构完全错误，很多标签没有关闭脚本在HTML标签之后，内容写在head标签里面，head在main里面，没有做doctype声明，最重要的是如果你想提交你应该有一个至少可以防止其默认行为的表单。 在 JavaScript 兄弟之前学习 HTML，并且当您已经知道输入将始终是数字时，使用输入类型 Number 也是一个好习惯。
这是您要制作的代码
<.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>
被调用的js文件function
function tryMe(arg) {
document.write(arg);
}
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>
你可以这样尝试：
<.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>
如何为此JavaScript / HTML代码添加一个按钮，以便我的代码仅在按下按钮后才会运行？
[英]How do i add a button to this JavaScript/HTML code, so that my code only runs once the button is pressed?
HTML 按钮按下 - 使用 Javascript 检查状态（单击时不触发）
[英]HTML Button pressed - check status (not trigger when clicked) with Javascript
当按下“完成”按钮时，datetimepicker触发javascript函数
[英]datetimepicker trigger a javascript function when the 'Done' button is pressed
在文本框中按下 Enter 时如何触发 javascript 函数
[英]How to trigger a javascript function when enter is pressed in a textbox
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.