javascript - 如何让这个按钮只调用该函数一次？

Question

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

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