Javascript创建按钮，获取用onclick按下的按钮的id(

注意：这是我的第一个项目，很抱歉，如果这是显而易见的，我已经到处找了，找不到它

我正在开发一个比file explorer/VLC更好的用户界面的网站，所以我制作了一个按钮，你可以上传你的所有视频文件。有了这些文件，我的Javascript有一个for循环，为目录中找到的每个视频创建一个按钮，然后将文件名放在按钮中。所有这些都起作用了，现在我要做的是ruggling with正在创建一个onclick事件，获取被按下按钮的ID。我真的很难做到这一点，因此任何帮助都将不胜感激

我的javascript：

var animepaths = [];
var animenames = [];

//FILE UPLOADING
const fileSelector = document.getElementById('file-selector');
fileSelector.addEventListener('change', (event) => {
  const fileList = event.target.files;
  filesLoop(fileList)
});

//loops through every file found in the directory
//and saves the path and file name to local storage
function filesLoop(files){
    for(var x = 0; x < files.length; x++){
        animepaths.push(files[x].webkitRelativePath)
        animenames.push(files[x].name)
    }
    printOnScreen(animenames, animepaths)
}


//Creating a button with an H2 tag inside
//Then display it on screen in the container (display grid)
function printOnScreen(animenames, animepaths){
    for(var x = 0; x < animenames.length; x++){
        const elem = document.createElement('button');
        elem.classList.add("grid-item");

        const elemtext = document.createElement('h2')
        elemtext.innerHTML = animenames[x]
        elemtext.classList.add("grid-innertext")
        elem.appendChild(elemtext)
        document.getElementById('container').appendChild(elem);
    }
}

var animepaths=[]；
变量animenames=[]；
//文件上传
const fileSelector=document.getElementById（'file-selector'）；
fileSelector.addEventListener（'change'，（事件）=>{
const fileList=event.target.files；
文件循环（文件列表）
});
//循环遍历目录中找到的每个文件
//并将路径和文件名保存到本地存储
函数filesLoop（文件）{
对于（var x=0；x

也许您可以使用以下内容：

函数onClick（animenaid）{
...
//你的魔法在这里
... 
}
屏幕上的功能打印（动画、动画路径）{
...
elem.onclick=onclick（animenames[x]）；
...
}

---

你觉得怎么样？

也许你可以用以下方法：

函数onClick（animenaid）{
...
//你的魔法在这里
... 
}
屏幕上的功能打印（动画、动画路径）{
...
elem.onclick=onclick（animenames[x]）；
...
}

---

您认为呢？

在任何DOM事件处理程序中，触发事件的元素都可以通过

this

关键字在处理程序中使用。因此，要获取触发事件的按钮的

id

，只需使用：

this.id

下面是一个例子：

document.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
log（“按钮的id为：“+this.id”）；
})；

---

单击我

在任何DOM事件处理程序中，触发事件的元素在处理程序中通过

this

关键字可用。因此，要获取触发事件的按钮的

id

，只需使用：

this.id

下面是一个例子：

document.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
log（“按钮的id为：“+this.id”）；
})；

---

单击我

如果有多个按钮，则应通过类而不是id来标识按钮组

在你的情况下，它更容易，因为你创建的按钮专业语法，所以我们可以在那里创建事件

//your function and some of my code
function printOnScreen(animenames, animepaths){
    for(var x = 0; x < animenames.length; x++){
       createAndAppendButton(animenames[x], animepaths[i]);
    }
}

function createAndAppedButton(name, path) {
  let button = document.createElement('button');
  button.classList.add("grid-item");
  button.innerText = name
  
  document.getElementById('container').appendChild(button);

  button.addEventListener("click", function() { 
    //do something with the path, which is accessible her
    console.log(path)
  });

}

//您的函数和我的一些代码
屏幕上的功能打印（动画、动画路径）{
对于（var x=0；x

---

如您所见，我删除了您的h1，因为h1不能是按钮标签的子按钮

如果您有多个按钮，则应通过类而不是id来标识按钮组

在你的情况下，它更容易，因为你创建的按钮专业语法，所以我们可以在那里创建事件

//your function and some of my code
function printOnScreen(animenames, animepaths){
    for(var x = 0; x < animenames.length; x++){
       createAndAppendButton(animenames[x], animepaths[i]);
    }
}

function createAndAppedButton(name, path) {
  let button = document.createElement('button');
  button.classList.add("grid-item");
  button.innerText = name
  
  document.getElementById('container').appendChild(button);

  button.addEventListener("click", function() { 
    //do something with the path, which is accessible her
    console.log(path)
  });

}

//您的函数和我的一些代码
屏幕上的功能打印（动画、动画路径）{
对于（var x=0；x

---

正如您所见，我删除了您的h1，因为h1不能是按钮标记的子项

我已经尝试过了，遗憾的是它不起作用。我用您提供的代码进行了快速测试，并使用了此函数onClick（animenaid）{console.log（animenaid）}但它只是立即将每个animeId记录到控制台中。我已经尝试过了，但遗憾的是它不起作用。我用您提供的代码做了一个快速测试，并使用了这个函数onClick（animenameId）{console.log（animenameId）}但它只是即时记录每一个动画谢谢你，它工作得很好！我花了5分钟才意识到“addEventListener”缺少大写字母L，但它工作得很好谢谢你花时间！更新了L…抱歉，非常感谢你，它工作得很好！我花了5分钟才意识到“addEventListener”缺少一个大写字母L，但它工作得很好谢谢你花时间！更新了L…对不起，我不能让它工作，我很确定这是因为我对EventListeners非常不熟悉，但是@helle的评论工作得很好！不能让它工作，我很确定不能