如何在vanilla javascript中使用一个切换按钮调用两个不同的函数
在Vanilla JavaScript中，你可以使用一个切换按钮来调用两个不同的函数。这通常涉及到监听按钮的点击事件，并根据按钮的状态（例如，是否被选中）来决定调用哪个函数。以下是一个简单的示例：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Button Example</title>
</head>
<body>
<button id="toggleButton">Toggle</button>
<script src="script.js"></script>
</body>
</html>JavaScript部分（script.js）
document.addEventListener('DOMContentLoaded', (event) => {
const toggleButton = document.getElementById('toggleButton');
let isFunctionOneActive = true;
toggleButton.addEventListener('click', () => {
if (isFunctionOneActive) {
functionOne();
} else {
functionTwo();
}
isFunctionOneActive = !isFunctionOneActive;
});
function functionOne() {
console.log('Function One is called');
// 在这里添加Function One的逻辑
}
function functionTwo() {
console.log('Function Two is called');
// 在这里添加Function Two的逻辑
}
});解释
- HTML部分：创建一个按钮，并为其设置一个ID，以便在JavaScript中引用。
- JavaScript部分：
- 使用
DOMContentLoaded事件确保DOM完全加载后再执行脚本。 - 获取按钮元素并添加点击事件监听器。
- 使用一个布尔变量
isFunctionOneActive来跟踪当前激活的函数。 - 在点击事件中，根据
isFunctionOneActive的值调用相应的函数，并切换其状态。
- 使用
应用场景
这种机制可以用于多种场景，例如：
- 切换主题（白天模式和夜间模式）。
- 切换功能（启用/禁用某些功能）。
- 切换视图（列表视图和网格视图）。
参考链接
通过这种方式，你可以轻松地使用一个按钮来调用两个不同的函数，并根据需要切换它们的行为。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
