如何让这个按钮只调用一次函数？答案

【问题标题】：How do I make this button to call the function only once?如何让这个按钮只调用一次函数？
【发布时间】：2019-12-14 14:50:22
【问题描述】：

我的 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>

【问题讨论】：

标签： javascript html function button

【解决方案1】：

在函数范围之外添加一个类似于 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>

【讨论】：

这可行，但我需要该功能在单击按钮时特别不打印两次。如果我调用重置函数，它会删除数组中的值。我希望生成按钮再次工作。如果用户不小心再次单击它，则不要打印两次。请检查代码中的编辑。
只需在reset函数中设置变量isClicked为false
是的，现在它可以按我的意愿工作了。感谢您的帮助

【解决方案2】：

我建议不要在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>

【讨论】：

【解决方案3】：

只需移除事件监听器，不需要额外的变量。

<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>

【讨论】：