[英]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.