繁体   English   中英

如何让这个按钮只调用一次函数?

[英]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 中实现结果。

只需对按钮单击使用addEventListenerremoveEventListner即可。

 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM