我如何知道哪个按钮称为我的javascript？_Javascript_Html

我如何知道哪个按钮称为我的javascript？

javascript html

我如何知道哪个按钮称为我的javascript？,javascript,html,Javascript,Html,你好我有三个按钮——我们称它们为myBtn1、myBtn2和myBtn3——执行基本相同的操作（即在模式模式下打开一个div）我有点想知道“谁”（即哪个按钮）调用了我的javascript。有没有一种简单的方法知道这一点，或者我需要复制我的javascript部分对不起，如果这个问题听起来很傻非常感谢你的帮助干杯我的html代码： <!DOCTYPE html> <html> <head> <link rel="styleshee

你好

我有三个按钮——我们称它们为myBtn1、myBtn2和myBtn3——执行基本相同的操作（即在模式模式下打开一个div）

我有点想知道“谁”（即哪个按钮）调用了我的javascript。有没有一种简单的方法知道这一点，或者我需要复制我的javascript部分

对不起，如果这个问题听起来很傻

非常感谢你的帮助

干杯

我的html代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/test.css" />
  </head>
  <body>

    <!-- Trigger/Open The Modal -->
      <button id="myBtn1">Open Modal</button>
      <button id="myBtn2">Open Modal</button>
      <button id="myBtn3">Open Modal</button>        
    <!-- The Modal -->
    <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>Some text in the Modal... </p>
      <p>Called by [myBtn1 or myBtn2 or myBtn3] </p>
    </div>
    <script type="text/javascript" src="./scripts/modal.js"></script>
    </div> 

  </body>
</html>


开放模态
开放模态
开放模态
&时代；
模态中的一些文本
由[myBtn1或myBtn2或myBtn3]调用

我的javascript（modal.js）：

/*
modal.js
*/
//获取模态
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

因为您已经在HTML文件中包含了使用脚本标记的js，所以所有js功能和事件都将可用

//获取打开模式对话框的按钮

var btn = document.getElementById("myBtn");

你的代码有错误，你应该提供一个有效的id

var btn=document.getElementById（“myBtn1”）//这将起作用
现在myBtn1将启动onclick调用
//在modal.js中
document.querySelectorAll("button").forEach(function (e) {
    e.addEventListener("click", function (event) {
        console.log(event.target)
    });
});

您可以在事件处理程序中使用event.target
，以确定调度事件的对象。通过这种方式，您可以轻松地将一个处理程序附加到父级，以处理其所有子级上的事件

document.getElementById（“div”）.onclick=function（e）{
console.log（如target）；
}

按钮1
按钮2
按钮3
事件侦听器被传递一个事件对象。它的target属性是触发事件的元素

document.queryselectoral（“按钮”）.forEach（函数（e）{
e、 addEventListener（“单击”），函数（事件）{
console.log（event.target）
});
});

按钮1
按钮2
按钮3
查看事件委派，使用addEventListener
并查看事件的target
属性。如果您知道要查找什么，请确保@Xufox可能重复。感谢您的支持避免内联事件属性。var id=$（ref.attr（'id'）；console.log的insetad；这并没有回答问题，应该是一个评论。谢谢Devashish，我需要将这部分添加到我的javascript文件中吗？是的。但请注意，代码将向文档中的所有按钮添加一个单击事件侦听器。如果希望仅在单击某些按钮时执行此操作，请为这些按钮指定一个类，并将选择器更改为document.queryselectoral（“.button class”）
。感谢您的提示，Devashish。我确实在控制台中看到了一些东西……1这是否意味着我也需要相应地修改函数btn.onclick？现在，我不确定如何利用控制台提供的功能。您不需要使用行btn.onclick
并以这种方式分配事件侦听器e.addEventListener（“单击”，函数（事件）{console.log（event.target）}）正在文档中的每个按钮上添加事件侦听器。如果有帮助，请接受答案。不客气：）OP可能不希望在div内部发生单击时触发事件，但不希望在任何按钮上发生。
function btnclick(ref){
   var id = $(ref).attr('id');
} 

var btn = document.getElementById("myBtn");

document.querySelectorAll("button").forEach(function (e) {
    e.addEventListener("click", function (event) {
        console.log(event.target)
    });
});