[英]How do I make this button to call the function only once?
我的 HTML 頁面上有一個按鈕,它調用一個函數來從 JavaScript 打印數字。 我希望按鈕只執行一次該功能。 現在,只要您單擊按鈕,它就可以執行多次,這會破壞頁面上的輸出。 我試圖在函數打印數字后清空數組,但它不起作用,因為該函數當時只會打印 50。
這是我的代碼:
<button type="button" onclick="decimal_table()">Generate Table</button>
<button id = "clear_pos" type="button" onclick="reset_button()">Clear</button>
<script>
const real_array = [];
const binary_array = [];
const octal_array = [];
const hex_array = [];
function decimal_table ()
{
for (let i = 0; i <= 50; i++)
{
real_array.push(i);
binary_array.push(i.toString(2).padStart(8, 0));
octal_array.push(i.toString(8));
hex_array.push(i.toString(16));
document.getElementById("numbers").innerHTML = real_array.join(" ");
document.getElementById("binaries").innerHTML = binary_array.join(" ");
document.getElementById("octals").innerHTML = octal_array.join(" ");
document.getElementById("hex").innerHTML = hex_array.join(" ");
}
}
function reset_button ()
{
for (let i = 0; i <= 50; i++)
{
real_array.shift(i);
binary_array.shift(i);
octal_array.shift(i);
hex_array.shift(i);
document.getElementById("numbers").innerHTML = real_array;
document.getElementById("binaries").innerHTML = binary_array;
document.getElementById("octals").innerHTML = octal_array;
document.getElementById("hex").innerHTML = hex_array;
}
}
</script>
在函數作用域外添加一個類似於 isClicked 的變量,並在執行任何操作之前檢查函數中的變量
<button type="button" onclick="decimal_table()">Generate Table</button>
<script>
var isClicked = false;
const real_array = [];
const binary_array = [];
const octal_array = [];
const hex_array = [];
function decimal_table ()
{
if(!isClicked){
for (let i = 0; i <= 50; i++)
{
real_array.push(i);
binary_array.push(i.toString(2).padStart(8, 0));
octal_array.push(i.toString(8));
hex_array.push(i.toString(16));
document.getElementById("numbers").innerHTML = real_array.join(" ");
document.getElementById("binaries").innerHTML = binary_array.join(" ");
document.getElementById("octals").innerHTML = octal_array.join(" ");
document.getElementById("hex").innerHTML = hex_array.join(" ");
isClicked = true;
}
}
}
</script>
我建議不要在HTML
模板中調用 click 函數,而是可以在純 javascript 中實現結果。
只需對按鈕單擊使用addEventListener
和removeEventListner
即可。
const real_array = []; const binary_array = []; const octal_array = []; const hex_array = []; const genTable = document.getElementById('generate-table'); const resetBtn = document.getElementById('clear_pos'); genTable.addEventListener('click',decimal_table) resetBtn.addEventListener('click',reset_button) function decimal_table () { for (let i = 0; i <= 50; i++) { real_array.push(i); binary_array.push(i.toString(2).padStart(8, 0)); octal_array.push(i.toString(8)); hex_array.push(i.toString(16)); document.getElementById("numbers").innerHTML = real_array.join(" "); document.getElementById("binaries").innerHTML = binary_array.join(" "); document.getElementById("octals").innerHTML = octal_array.join(" "); document.getElementById("hex").innerHTML = hex_array.join(" "); } genTable.removeEventListener('click',decimal_table); } function reset_button () { for (let i = 0; i <= 50; i++) { real_array.shift(i); binary_array.shift(i); octal_array.shift(i); hex_array.shift(i); document.getElementById("numbers").innerHTML = real_array; document.getElementById("binaries").innerHTML = binary_array; document.getElementById("octals").innerHTML = octal_array; document.getElementById("hex").innerHTML = hex_array; } genTable.addEventListener('click',decimal_table) }
<button type="button" id="generate-table">Generate Table</button> <button id = "clear_pos" type="button" >Clear</button> <span id="numbers"></span> <br><br> <span id="binaries"></span> <br><br> <span id="octals"></span> <br><br> <span id="hex"></span>
只需刪除事件監聽器,不需要額外的變量。
<button type="button" onclick="decimal_table(this)">Generate Table</button> <script> function decimal_table(el) { // remove the event el.removeAttribute("onclick") console.log('clicked') // ..rest of your code } </script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.