如何在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的值调用相应的函数，并切换其状态。
- 使用
应用场景
这种机制可以用于多种场景，例如：
- 切换主题（白天模式和夜间模式）。
- 切换功能（启用/禁用某些功能）。
- 切换视图（列表视图和网格视图）。
参考链接
通过这种方式，你可以轻松地使用一个按钮来调用两个不同的函数，并根据需要切换它们的行为。
相关·内容
我正在使用annyang.js进行语音识别，它有两个不同的功能，启动annyang.start()和停止annyang.abort()，现在我如何制作一个切换按钮来触发这两个功能？我的代码 <div class="action" onclick="actionToogle()"> JS <script>
浏览 28提问于2021-11-21得票数 1
回答已采纳
我想在单击按钮后更改它的名称。有两个不同的函数Add和Subtract。第一次按钮名是' add '，单击时应该执行Add number功能，然后动态地将按钮名称更改为Subtract，一旦我单击subtract，则应该执行subtract函数，并再次添加上一个按钮的名称。如何在按钮切换为add时调用
浏览 2提问于2020-06-09得票数 1
我想要更改一个按钮的名称，一旦它是clicked.There是两个功能不同的增加和减去。第一次按钮名是' add‘，点击时应执行Add number功能，然后动态地将按钮名改为Subtract，一旦我点击subtract，则应执行subtract函数，并再次执行上一次要添加的按钮名称。如何在按钮切换为add时调用<em
浏览 44提问于2020-06-09得票数 0
我有一个Django视图，用户可以通过切换按钮在列表的2个不同的“视图”之间进行选择。地图视图，其中地图与标记和一些信息一起显示；列表视图，其中列表与相同的信息一起显示，但以列表视图的形式显示。当用户单击一个或另一个选项之间的切换按钮时，没有问题，因为我实现了一个onClick Javascript函数，其中我
浏览 26提问于2020-11-26得票数 0
回答已采纳
2回答
我想在vanilla JavaScript中创建两个不同的按钮，当依次单击时，会显示不同的文本消息。 对重新组织下面的代码有什么建议吗？谢谢。 我可以找到一个按钮的切换功能，但不能为不同的按钮。document.getElementById('hiddenMessageSpain').sty
浏览 42提问于2019-04-16得票数 1
回答已采纳
1回答
如何登录到不同的Gmail帐户？我们有三个Gmail帐户，每次我试图打开Gmail帐户时，都会打开同一个Gmail帐户。为什么我不能输入我想要访问的Gmail帐户？
浏览 0提问于2015-02-07得票数 -2
1回答
使用(Vanilla) JavaScript，在用户提交表单后如何维护单选按钮的'checked‘值？当用户使用数据库表更新表单时，即使数据库表仍然显示，页面也会重新加载，本地存储也会变为“选中”状态。
浏览 6提问于2018-07-08得票数 0
回答已采纳
首先:我使用了嵌入到Adobe CS3的脚本引擎javascript的一个相当模糊的实现。此实现有时与“标准”javascript不同，因此出现了问题。
我使用 ()比较两个文档之间的文本选择。jsdiff使用vanilla对象作为关联数组，将一个单词从文本映射到另一个对象。(请参阅jsdiff.js中第129
浏览 3提问于2008-09-19得票数 2
回答已采纳
我使用切换按钮来控制网页上的继电器开关。我目前正在使用AJAX来更新继电器状态，当用户点击网页上的切换按钮时，但我也已经编写了一个微控制器，当继电器被物理地打开或关闭时，更新数据库中的继电器状态。我希望切换按钮在网页上，以更新，因为这发生了。我目前正在使用setInterval()定期发出AJAX请求，以检查数据库中的<
浏览 17提问于2020-08-02得票数 1
我想在java中使用Selenium测试一个前端的vanilla javascript。我可以很容易地打开页面，点击一些东西等，但我不能确切地指出断言测试的最佳实践。主要是，我们可以在点击一些按钮后获得变量，例如： variable = 2;假设某个按钮调用上面的函数，在selenium中我可以单击该函数，但是否有方法调用</
浏览 2提问于2021-10-26得票数 0
1回答
我们网站的顶部导航横幅是动态加载的。每个用户根据其访问权限设置有一组特定的导航选项卡。特定用户在所有页面中的横幅都是相同的。因此，目前我们的设计是使用Ajax获取用户访问权限设置，然后填充横幅，这意味着当用户访问每个页面时，顶部的横幅在获取Ajax数据后刷新。这不是一个很好的用户体验，看到横幅刷新所有的时间。我想要的是，在登录后，导航横幅应该保持静态与活动选项卡的
浏览 0提问于2020-03-15得票数 0
回答已采纳
我有包含两个div的html代码，其中包含有关飞机起飞和到达的信息，如下所示。第二个表是下第一个表，但它太大的屏幕，我需要它显示在屏幕上没有滚动。因此，我只需要显示一个表，并使用CSS动画或javascript定期(例如30秒)在表之间切换。有谁能帮帮我吗？</c:forEach> </tbody>
<
浏览 0提问于2018-04-25得票数 0
我正在使用Kartik标签将我的表单组织成多个表单。为此，我将表单划分为3个视图，每个视图代表一个选项卡，并包含表单的一部分。我的问题是submitbutton只能从一个表单获取数据，而不能从所有表单获取数据。谁能给我举个简单的例子来帮助我？
我在这里发布了我安装它的kartik标签链接：谢谢
浏览 0提问于2015-08-07得票数 0
在<ItemTemplate>和<AlternatingItemTemplate>中，除其他标签外，还有3个HTML按钮(<input type="button"...)在单击时发出不同的javascript我知道如果我使用ASP Button，我可以简单地使用以下内容：我尝试将我的HTML按钮
浏览 1提问于2011-08-28得票数 0
回答已采纳
我有一个汉堡按钮切换器，当点击它时，它应该会打开一个菜单面板。同时，它应该调用一个函数来阻止文档的滚动。我有两个功能，一个是禁用文档滚动，另一个是启用文档滚动：function enableScroll(){...}这里我有一个切换器图标点击事件：
$("#main-nav-toggler&q
浏览 19提问于2020-05-06得票数 1
回答已采纳
2回答
document.getElementById("instructions").innerHTML = "Press S for 'same' and D for 'different'";所以现在，当我点击切换功能来启动游戏时，我会通过更改html文件中的innerHTML来显示指令。我希望弹出两个按钮，但是，这两个按钮显示“相同”和“不同”。我几乎是<em
浏览 15提问于2018-02-08得票数 0
我试着得到一个克罗皮脚本旋转使用按钮。由于似乎是不同的语法或其他原因，它无法处理这个特定的脚本。我不是一个狂热的JavaScript编码器。但是下面的代码是我所拥有的，并试图使用按钮来实现旋转。到目前为止没有什么好的！噢!默认情况下，我在croppie.js中启用了定向，因为由于语法原因，我不知道如何在下面的脚本中添加它，以防您
浏览 6提问于2016-04-22得票数 6
回答已采纳
2回答
所以我有两个按钮，一个用于显示嵌入，另一个用于隐藏嵌入。button"></div>
我用来显示/隐藏的JavaScriptdocument.getElementBy
浏览 1提问于2016-08-28得票数 2
1回答
只有使用一个提交按钮才能发布值。
、、、、
我有两个提交按钮在一个形式，如。当我单击它发送的post数据的Check-button时，如下所示：
{name=AName&IPAddress=123.456.7.89&StreamAddress=http://stream.com当用户单击Check-button时，它将在post之后调用javascript函数enableEditing(<boolean>)，其中布尔值基于值是否有
浏览 2提问于2016-03-22得票数 2
回答已采纳
我正在尝试构建一个react NavBar，它有一个切换按钮，可以改变页面的主题。主题是一个引导主题，它在元素中传递给一个头盔组件，目前都在导航栏中。此切换按钮更改状态，然后函数根据状态返回具有不同hrefs (引导主题)的两个元素中的一个，然后在头盔元素中呈现。 问题是，当
浏览 10提问于2019-12-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
即时通信 IM活动推荐
腾讯云开发者
