javascript - 如何让这个按钮只调用一次函数?
问题描述
我的 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>
推荐阅读
- swift - 如何在 Firebase 实时数据库中将一组图像 URL 组合在一起?(迅速)
- c++ - 在 C++ 中实现程序时显示不正确的输出
- react-native - 使用flexwrap时过滤每行的第一项
- python - Selenium 卡在“访问 URL 之前检查浏览器”
- java - Kinesis 消费者异步检查点
- c++ - 带有私有向量 .push_back 的 OpenMP 在循环完成后不会释放所有内存
- arrays - 如何将几个 Google 表格列转换为 JSON 字符串?
- google-sheets - 通过忽略空白单元格重新调整四列值(Google 表格)
- reactjs - Jest 中的 toMatchSnapshot 时无法在 useEffect 中模拟函数
- networking - 路由器(不是第 3 层交换机)是否直接转发没有 MAC 的 ip 数据包?