那些遇到过的问题

JavaScript - onClick获取单击按钮的ID

Bin*_*hen 267 html javascript

如何找到被点击的按钮的ID？

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
}
Run Code Online (Sandbox Code Playgroud)

sha*_*mar 538

您需要将ID作为函数参数发送.像这样做:

<button id="1" onClick="reply_click(this.id)">B1</button>
<button id="2" onClick="reply_click(this.id)">B2</button>
<button id="3" onClick="reply_click(this.id)">B3</button>
    
<script type="text/javascript">
  function reply_click(clicked_id)
  {
      alert(clicked_id);
  }
</script>
Run Code Online (Sandbox Code Playgroud)

这将发送ID this.id作为clicked_id您可以在您的函数中使用.在这里看到它.

  • 我只想注意,对于任何使用JQuery的`event.target.id`获取空引用异常的人(对我而言,Firefox和IE都抛出它),这是一个很好的解决方案,适用于所有三种主流浏览器. (2认同)
  • 兄弟,你是互联网上唯一能够为我解释这种方式的人.在函数名中使用变量而不是在实际函数脚本中使用另一个变量对我来说绝对没有意义!在一个简短的句子中,你向我解释说,我们放在函数bracket()中的变量和我们在函数声明中使用的变量是相同的,只是传递给AS!这太棒了!感谢我的主人,感谢你给予我的智慧 (2认同)

Jas*_*run 56

通常,如果将代码和标记分开,事情就更容易组织起来.定义所有元素,然后在JavaScript部分中,定义应对这些元素执行的各种操作.

调用事件处理程序时,会在单击的元素的上下文中调用它.因此,标识符这将把你点击的DOM元素.然后,您可以通过该标识符访问元素的属性.

例如:

<button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>

<script type="text/javascript">
var reply_click = function()
{
    alert("Button clicked, id "+this.id+", text"+this.innerHTML);
}
document.getElementById('1').onclick = reply_click;
document.getElementById('2').onclick = reply_click;
document.getElementById('3').onclick = reply_click;
</script>
Run Code Online (Sandbox Code Playgroud)

  • 如果按钮在中继器中并因此动态生成，那么您不知道将有多少个按钮怎么办？ (2认同)
  • 有很多方法可以解决这个问题.例如,动态生成javascript.或者,将相同的类添加到所有按钮,然后使用该类名迭代所有按钮并以此方式附加处理程序. (2认同)

sdl*_*rhc 38

(我认为id属性需要以字母开头.可能是错的.)

你可以参加活动代表团......

<div onClick="reply_click()">
    <button id="1"></button>
    <button id="2"></button>
    <button id="3"></button>
</div>

function reply_click(e) {
    e = e || window.event;
    e = e.target || e.srcElement;
    if (e.nodeName === 'BUTTON') {
        alert(e.id);
    }
}
Run Code Online (Sandbox Code Playgroud)

......但这需要你对古怪的事件模型相对舒服.

  • @sdleihssirhc实际上,你是某种傲慢,[所有用HTML5改变](http://mathiasbynens.be/notes/html5-id-class). (5认同)
  • “id”属性的值可以是任何字符串。它不必以字母开头。 (2认同)

小智 35

使用纯粹的JAVASCRIPT:我知道它已经晚了但可能会为未来的人们提供帮助:

在HTML部分:

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
Run Code Online (Sandbox Code Playgroud)

在Javascipt控制器中:

function reply_click()
{
    alert(event.srcElement.id);
}
Run Code Online (Sandbox Code Playgroud)

这样我们就不必在调用javascript函数时绑定Element的'id'.

  • 仅供参考：全局事件对象在 chrome 中可用，而不是在 Firefox 中。 (4认同)
  • 自 2021 年起，event.srcElement 已弃用。 (3认同)
  • 我喜欢这种动态功能的想法。我正在使用 PHP/MySQL 和 JS 向动态数据库添加函数；这适用于向特定动态类添加特定功能。谢谢！ (2认同)
  • 在尝试时,我在访问事件时得到`TypeError:event is undefined` ... (2认同)

小智 26 

<button id="1" onClick="reply_click(this)"></button>
<button id="2" onClick="reply_click(this)"></button>
<button id="3" onClick="reply_click(this)"></button>

function reply_click(obj)
{
var id = obj.id;
}
Run Code Online (Sandbox Code Playgroud)

  • 欢迎来到SO.请在回答时解释一下代码. (14认同)

Jay*_*Jay 16 

<button id="1" class="clickMe"></button>
<button id="2" class="clickMe"></button>
<button id="3" class="clickMe"></button>

<script>
$('.clickMe').click(function(){
    alert(this.id);
});
</script>
Run Code Online (Sandbox Code Playgroud)

Tim*_*nen 11

如何在没有内联JavaScript的情况下执行此操作

通常建议避免使用内联JavaScript,但很少有例子说明如何操作.
这是我将事件附加到按钮的方式.
我对推荐的方法与简单onClick属性相比多长时间并不完全满意.

仅限现代浏览器

<button class="btn">Button</button>
<script>
let OnEvent = (doc) => {
    return {
        on: (event, className, callback) => {
            doc.addEventListener('click', (event)=>{
                if(!event.target.classList.contains(className)) return;
                callback.call(event.target, event);
            }, false);
        }
    }
};


OnEvent(document).on('click', 'btn', function (e) {
    window.console.log(this, e);
});

</script>
Run Code Online (Sandbox Code Playgroud)

跨浏览器

<!DOCTYPE html>
<html>
<head>
<script>
(function(doc){
    var hasClass = function(el,className) {
        return el.classList.contains(className);
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script>
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

使用jQuery跨浏览器

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

您可以在文档准备好之前运行它,单击按钮将起作用,因为我们将事件附加到文档.

这是一个jsfiddle
由于一些奇怪的原因insertHTML,即使它在我的所有浏览器中都有效,该函数也无法正常工作.

您可以随时更换insertHTML使用document.write,如果你不介意它的缺点

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function($){
    $(document).on('click', '.click-me', function(e){
      doSomething.call(this, e);
    });
})(jQuery);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

资料来源:

A-S*_*ani 7

如果您不想将任何参数传递给onclick函数，只需使用event.target即可获取clicked元素：

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
    // event.target is the element that is clicked (button in this case).
    console.log(event.target.id);
}
Run Code Online (Sandbox Code Playgroud)

cod*_*cat 6

使用纯JavaScript,您可以执行以下操作:

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i < buttonsCount; i += 1) {
    buttons[i].onclick = function(e) {
        alert(this.id);
    };
}?
Run Code Online (Sandbox Code Playgroud)

检查它在JsFiddle

ges*_*est 6 

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
   console.log(window.event.target.id)
}
Run Code Online (Sandbox Code Playgroud)

Kam*_*ski 6

这是Prateek 答案的改进- 事件是通过参数传递的，因此reply_click不需要使用全局变量（并且到目前为止没有机构提出这个变体）

function reply_click(e) {
  console.log(e.target.id);
}
Run Code Online (Sandbox Code Playgroud) 
<button id="1" onClick="reply_click(event)">B1</button>
<button id="2" onClick="reply_click(event)">B2</button>
<button id="3" onClick="reply_click(event)">B3</button>
Run Code Online (Sandbox Code Playgroud)

ARi*_*han 6

第一种方法：使用发送触发元素this

<button id="btn01" onClick="myFun(this)">B1</button>
<button id="btn02" onClick="myFun(this)">B2</button>
<button id="btn03" onClick="myFun(this)">B3</button>

<script>
  function myFun(trigger_element)
  {
      // Get your element:
      var clicked_element = trigger_element

      alert(clicked_element.id + "Was clicked!!!");
  }
</script>
Run Code Online (Sandbox Code Playgroud)

通过这种方式发送一个类型的对象：HTMLElement并且您可以获得元素本身。你不需要关心元素是否有 id 或任何其他属性。它本身工作得很好。

第二种方式：使用发送触发元素 idthis.id

<button id="btn01" onClick="myFun(this.id)">B1</button>
<button id="btn02" onClick="myFun(this.id)">B2</button>
<button id="btn03" onClick="myFun(this.id)">B3</button>

<script>
  function myFun(clicked_id)
  {
      // Get your element:
      var clicked_element = document.getElementById(clicked_id)

      alert(clicked_id + "Was clicked!!!");
  }
</script>
Run Code Online (Sandbox Code Playgroud)

通过这种方式发送一个类型的对象：String并且您不会获得元素本身。所以在使用之前，你需要确保你的元素已经有一个id。

您不得自行发送元素 id，例如onClick="myFun(btn02)". 这不是干净的代码，它会使您的代码失去功能。

在你的情况下：

<button id="1" onClick="reply_click(this.id)">B1</button>
<button id="2" onClick="reply_click(this.id)">B2</button>
<button id="3" onClick="reply_click(this.id)">B3</button>
    
<script type="text/javascript">
  function reply_click(clicked_id)
  {
      alert(clicked_id);
  }
</script>
Run Code Online (Sandbox Code Playgroud)

小智 5

你可以这样做: 

<input type="button" id="1234" onclick="showId(this.id)" value="click me to show my id"/>
<script type="text/javascript">
   function showId(obj) {
        var id=obj;
        alert(id);
   }
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

1077035 次

最近记录：

7 年，2 月 前
测试一个元素是否包含一个类？ 497
为什么document.write被认为是"不好的做法"？ 355
event.preventDefault()函数在IE中不起作用 202
document.write的替代品是什么？ 64
表单之外的按钮html标签是否有效？ 35
更多相关链接
相关归档
自动检测移动浏览器(通过用户代理？) 291
是Javascript编译还是解释语言？ 141
停止Chrome缓存我的JS文件 130
推荐用于JavaScript编码的Vim插件？ 125
使用中键单击触发onclick事件 80
与target ="_ blank"和rel ="noopener noreferrer"的链接仍然很脆弱？ 46
使用JavaScript加载HTML模板 41
如何在组织模式下调整图像大小 34
将iframe链接加载到父窗口？ 27
AngularJS ng-单击表行但不在某个td上 19
难疑归档
何时在Java中使用LinkedList而不是ArrayList？ 2974
在Git中只提交文件的一部分 2629
如何让Git忽略文件模式(chmod)的变化？ 2188
如何使用Git将标签推送到远程存储库？ 2091
如何在Bash中解析命令行参数？ 1764
如何修复java.lang.UnsupportedClassVersionError:不支持的major.minor版本 1532
将文件从主机复制到Docker容器 1391
在关系数据库中存储分层数据有哪些选项？ 1281
更改列:null为非null 1177
我是否提交了由npm 5创建的package-lock.json文件？ 1164