如何仅使用 javascript 更改 onclick 按钮颜色?

2024-02-07

我试图使用 onclick 和 getElementsByClassName 更改按钮的颜色,并想出了这样的结果:

HTML:

<button onclick="submitButtonStyle()" type="submit" class="stylebutton"> 
Submit </button>

JS:

function submitButtonStyle() { 
document.getElementsByClassName("stylebutton").style.backgroundColor = "red"; }

如果你们给我一些关于我的代码中缺少什么/我应该添加什么等的提示,我将非常感激。


getElementsByClassName返回一个HTMLCollection所以你需要使用索引来获取元素,在你的情况下index === 0getElementsByClassName[0].

实际上,您不需要调用该函数getElementsByClassName,将元素作为参数传递。

function submitButtonStyle(_this) {
  _this.style.backgroundColor = "red";
}
<button onclick="submitButtonStyle(this)" type="submit" class="stylebutton"> 
Submit </button>

使用事件绑定和函数的更好方法querySelectorAll

document.querySelectorAll('.stylebutton').forEach(function(e) {
  e.addEventListener('click', function() {
    this.style.backgroundColor = "red";
  })
});
<button type="submit" class="stylebutton"> Submit </button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何仅使用 javascript 更改 onclick 按钮颜色? 的相关文章

  • 不使用Vue可以使用Vuex吗? (Vuex 服务器端?)

    Vuex 抱怨如果不调用 Vue use Vuex 就无法创建新的 store 实例 虽然这通常没问题 但我正在摆弄使用同一商店编写后端 前端的想法 有人知道答案吗 Thanks TL DR 你可以在 Node 中完美使用 Vuex 无需浏
  • javascript 对象是否像 Ruby 一样“开放”?

    在 Ruby 中 我可以使用与声明自己的语法相同的语法来添加和修改任何类 对象或方法的功能 因为 Ruby 有 开放类 JavaScript 是这样的吗 举个例子 就我而言 我想更改 Google Apps 脚本处理 URL 对象的方式 以
  • 在 for 循环内顺序执行 Promise

    我正在努力将两个承诺链接到一个循环中 以便第二个承诺在第一个承诺得到解决之前不会启动 我看到了一个减少的例子 还无法让它工作 如果我这样做 就像我现在所做的那样 代码会并行执行 就像这样 所有异步请求都会被触发 当然结果会很混乱 请看一下
  • 模式弹出窗口上的按钮单击事件,在网格视图内未触发

    我遇到以下问题 场景 我有一个 asp 网格 其中有一些绑定到数据的列 最后一列已转换为模板字段 在这个模板字段中有一个按钮 上面附加了一个模式弹出扩展器 该字段中隐藏着一个模式弹出窗口 此模式弹出窗口用于添加新帐户 它包含 2 个文本框
  • 如何从浏览器打印 PDF

    在Web应用程序中 是否可以强制在客户端上打印PDF文件 如果浏览器配置为在窗口内打开 PDF 我想调用 window print 会起作用 但某些浏览器 例如我的 被配置为在外部打开 PDF 谷歌文档的做法是将 JavaScript 嵌入
  • 如何使用 TypeScript 和 Angular 2 将插件添加到 ng2-ckeditor ?

    我正在尝试添加Justify插件到我的 ckeditor 但不幸的是我找不到任何关于如何将插件添加到 ng2 ckeditor 的信息 另外 我找不到任何应该添加插件的目录或配置文件 我正在使用 ng2 ckeditor1 0 6使用 Ty
  • Redux - 异步加载初始状态

    我正在尝试找出最简洁的方法来加载来自 API 调用的 Redux 存储的初始状态 据我所知 提供初始状态的典型方法是在页面加载时在服务器端生成它 并将其作为简单对象提供给 Redux createStore 但是 我正在编写一个应用程序 计
  • 如何使用多重身份验证 - firebase?

    我有一个注册屏幕 其中包含 用户名 电子邮件 电话号码 密码 在本例中 我使用电话号码身份验证来验证号码 因此在用户验证他的号码后 我将他的数据保存到 firebase DB 中 所以在那之后 我将下摆导航到登录屏幕 应该包含电子邮件 密码
  • Babel NodeJS ES6:语法错误:意外的令牌导出

    我正在尝试使用 babel 来运行我的 NodeJS 程序 其中包括 ES6 语法和 Colyseus 库的导出 但是 当我运行命令时 babel node server js 出现以下错误消息 export class MyRoom ex
  • 通过 Jquery 禁用 TinyMCE 文本编辑器

    我有多个 Tinymce 编辑器 我试图禁用它们的编辑功能 我尝试过多种变体 if Model hasRegular ToString ToLower tinymce get rte getBody setAttribute content
  • 打字稿 keyof 返回字符串数组

    假设我有一堂课 class Test propA propB propC 我想创建一个返回字符串数组的方法 并将其键入为仅 Test 类中存在的键 我该如何使用keyof特征 class Test propA propB propC get
  • 类型“AngularFirestoreCollection”上不存在属性“onSnapshot”

    我正在尝试将侦听器与云 Firebase 分离 但仍然收到此错误 类型 AngularFirestoreCollection 上不存在属性 onSnapshot 你知道我应该进口什么吗 我直接从 Firebase 文档中复制此代码 let
  • Promise 和 setTimeout

    我正在尝试确定一种方法来 暂停 我的 Promises 代码 直到条件成立为止 也许可以使用递归setTimeout 对于我的简单示例 我手动设置waitValue 我需要等一下 如果waitValue仍然是错误的 那就只能继续等待了 当然
  • QUnit 不会运行测试

    我刚刚开始使用 QUnit 并遇到问题 我目前正在使用 TypeScript 它是一个 JavaScript 编译器 我在与我的主要课程结构平行的课程中进行测试 在每个类中 我都有一个名为 runTests 的函数 为了执行这些测试 我循环
  • D3.js折线图溢出边距

    我有 d3 js 折线图 它作为 angular js 应用程序的指令包含在内 动态添加的线和 xAxis 以及缩放线上的边距溢出 我必须在图的顶部为每条加载的线创建 Ox 轴 并具有 Ox 和 Oy 单独的缩放可能性 Oy 缩放工作正常
  • 如何在 Typescript 中使用默认值定义可选构造函数参数

    是否可以有带有默认值的可选构造函数参数 如下所示 export class Test constructor private foo string foo private bar string bar 这给了我以下错误 参数不能有问号和初始
  • 为什么在 GWT(或任何 Web 应用程序)中使用命令模式?

    根据这个视频 7 50 Google 建议在其请求处理 API 之上使用命令模式 还有一个看起来很有帮助的项目gwt 调度 http code google com p gwt dispatch 实现该模式 根据 gwt 调度我需要为每个命
  • 将 jQuery 集成到电子应用程序中

    我正在尝试将 jquery 功能添加到用 Electron 编写的桌面应用程序中 使用电子快速启动存储库 我将下载的 jquery 文件添加到main html像这样的文件 or so 然后在index js我正在文件中添加代码create
  • Javascript:为什么我需要在 for 循环中声明 var i = 0?

    我正在做一个需要递归的问题 用于计算加起来达到一定数量的硬币组合 有效的解决方案如下 困扰我几个小时的一件事是 当我没有在 for 循环中声明 var i 0 时 它不起作用 据我了解 当我在 for 循环中声明 var 时 它会保留在该范
  • Json 对象 - 获取键和值

    我是 JSON 的新手 所以 如果这是一个非常基本的疑问 请不要责骂我 我有一个 JSON 对象引用 我想获取 Key 对象只有一个键值对 我如何在 Java 中获得它 您可以使用jsonObject keys 获取所有钥匙 然后您可以迭代

随机推荐