[英]How can I prevent my function from running on every click?
我正在嘗試使用 HTML 和 JavaScript 創建一個動態下拉列表，但每次單擊下拉列表時，我都會得到一組新的重復值。 我怎樣才能防止這種情況發生？ 我寧願堅持使用 vanilla JS 和 html
function yearsArray(num) { let years=document.getElementById("years") let year=[...Array(num+1).keys()] year.shift() year.shift() year.forEach(element => { switch (element) { case 1: years.add(new Option(element,element,true)) break; default: years.add(new Option(element,element,false)) break; } }) }
body{ font-family: Arial, Helvetica, sans-serif; } h1{ color: gray; }
<!DOCTYPE html> <head> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <title>Simple Interest Calculator</title> <body> <div class="maindiv"> <h1>Simple Interest Calculator</h1> <form> <label for="principal">Amount</label> <input type="number" name="principal" id="principal"> <br/> <label for="rate">Interest Rate</label> <input type="range" id="rate" name="rate" min="0" max="20" step=".25"> <span id="rate_val">10.25%</span> <br/> <label for="years">No. of Years </label> <select id="years" name="years" onclick="yearsArray(20)"> <option selected value="1">1</option> </select><br/> <!-- Interest : <span id="result"></span><br/> --> <button type="submit">Compute Interest</button> </form> </div> </body> </html>
只需在頁面加載時運行該函數一次：
（您當然可以使用標記創建選項）
function yearsArray(num) { let years = document.getElementById("years") let year = [...Array(num + 1).keys()] year.shift() year.shift() year.forEach(element => { switch (element) { case 1: years.add(new Option(element, element, true)) break; default: years.add(new Option(element, element, false)) break; } }) } yearsArray(20); //<---------- This runs the function on page load
body { font-family: Arial, Helvetica, sans-serif; } h1 { color: gray; }
<!DOCTYPE html> <head> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <title>Simple Interest Calculator</title> <body> <div class="maindiv"> <h1>Simple Interest Calculator</h1> <form> <label for="principal">Amount</label> <input type="number" name="principal" id="principal"> <br/> <label for="rate">Interest Rate</label> <input type="range" id="rate" name="rate" min="0" max="20" step=".25"> <span id="rate_val">10.25%</span> <br/> <label for="years">No. of Years </label> <select id="years" name="years"> <option selected value="1">1</option> </select><br/> <!-- Interest : <span id="result"></span><br/> --> <button type="submit">Compute Interest</button> </form> </div> </body> </html>
弄清楚了。 將 javascript 函數添加到 body 標簽
<body onload=yearsArray(20)></body>
我的 JavaScript 函數在每次回發時都保持運行，我該如何防止這種情況發生？
[英]My JavaScript function keeps running on every postback, how can I prevent this?
在我的函數運行時如何解除綁定或阻止其他單擊事件發生？
[英]How do I unbind or prevent other click events from occurring while my function is running?
如何退出單擊 function 或防止 function 在滿足條件之前觸發
[英]How can I exit a click function or prevent the function from triggering until a condition is met
如何防止 forEach function 同時觸發 object 的每個實例？
[英]How can I prevent a forEach function from firing on every instance of an object all at once?
如何防止我的觸摸設備執行:: hover而不是單擊功能？
[英]How do I prevent my a touch device from executing an ::hover instead of a click function?
當同時觸發多個更改事件時，如何防止函數多次運行？
[英]How can I prevent a function from running more than once when multiple change events are fired at once?
如果找不到搜索到的getElementById后，如何防止js函數運行？
[英]How can I prevent a js function from running when a searched after getElementById cannot be found?
如何防止 ReactJS onclick function 在渲染上運行
[英]How do I prevent ReactJS onclick function from running on render
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.