草庐IT

javascript - 增加点击按钮的次数

coder 2023-08-13 原文 

var index = 0;

默认情况下，index 的值为 0，现在我有两个按钮，当我单击按钮 2 或 1 时，index 的值应该增加。单击的第二个按钮应该取值 1...类似地第三个等等。

最佳答案

你需要一个函数来做到这一点:

function incrementIndex() {
    index += 1;
}

这假设您的 index 变量是全局的。

接下来您需要做的是等待 click 事件。在 JavaScript 中有三种方法可以做到这一点。

  1. 内联 JavaScript

    <button onclick="incrementIndex()">Button 1</button>
<button onclick="incrementIndex()">Button 2</button>

    这就是希特勒开发网站的方式。不要这样做。

  2. 事件处理程序

    这需要您等到 DOM 加载完毕，然后以某种方式“获取”您的两个按钮。如果页面上只有两个按钮，您可以执行类似的操作(但前提是此脚本出现在文档中的 HTML 之后):

    var buttons = document.getElementsByTagName('button');
buttons[0].onclick = buttons[1].onclick = incrementIndex;

    请注意，在该示例中，incrementIndex 末尾没有括号()。

  3. 事件监听器

    事件处理程序的问题是您一次只能附加一个函数。如果您要让其他 JavaScript 监听按钮点击，则必须使用事件监听器。

    但是事件监听器是一个主要的痛点，因为 IE6-8 做错了，并且(取决于项目)您可能不得不围绕它进行编码。最简单的方法是在大多数浏览器中添加事件监听器:

    var addEvent = window.addEventListener ? function (elem, type, method) {
    elem.addEventListener(type, method, false);
} : function (elem, type, method) {
    elem.attachEvent('on' + type, method);
};

addEvent(buttons[0], 'click', incrementIndex);
addEvent(buttons[1], 'click', incrementIndex);

    这只是跨浏览器事件监听的表面。如果您想了解更多，QuirksMode has a good series of articles在上面。

关于javascript - 增加点击按钮的次数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5736860/

javascript增加codeincrementIndexsectionhtml

有关javascript - 增加点击按钮的次数的更多相关文章

  1. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  2. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

  5. ruby-on-rails - 如何在 Rails 中添加禁用的提交按钮 - 2

    我在ruby​​表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby​​禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮，我们在St

  6. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  7. ruby - Sinatra:点击 URL 时运行 ruby​​ 代码 - 2

    我想在每次访问url/code时运行一个脚本(code.rb)。如何运行脚本？require'sinatra'get'/'do#runthescriptend 最佳答案 要么fork另一个进程:system('rubycode.rb')...或者简单地将脚本加载到当前上下文中:load'code.rb'#*not*require 关于ruby-Sinatra:点击URL时运行ruby​​代码，我们在StackOverflow上找到一个类似的问题： https:

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. ruby - 获取数组中值的最大连续出现次数 - 2

    下面有没有更优雅的方法来实现这个:输入:array=[1,1,1,0,0,1,1,1,1,0]输出:4我的算法:streak=0max_streak=0arr.eachdo|n|ifn==1streak+=1elsemax_streak=streakifstreak>max_streakstreak=0endendputsmax_streak 最佳答案 类似于w0lf'sanswer,但通过从chunk返回nil来跳过元素:array.chunk{|x|x==1||nil}.map{|_,x|x.size}.max

  10. ruby - 如何使用每个迭代器获取数组索引或迭代次数？ - 2

    我正在用ruby​​遍历一个数组。有没有一种简单的方法可以在不返回for循环的情况下获取迭代次数或数组索引？ 最佳答案 啊，知道了。each_with_index哇!编辑:糟糕! 关于ruby-如何使用每个迭代器获取数组索引或迭代次数？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/706115/

随机推荐