Javascript 创建了按钮,通过 onclick(

Javascript created button, get id of the button pressed with onclick(

注意:这是我的第一个项目,很抱歉,如果这很明显,我到处都找不到

我正在开发一个比文件 explorer/VLC 更好 UI 的网站,所以我制作了一个按钮,您可以在其中上传所有视频文件。对于这些文件,我的 Javascript 有一个 for 循环来为在该目录中找到的每个单独的视频创建一个按钮,然后它将文件的名称放在按钮中。所有这一切都有效,现在我正在努力的是创建一个 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);
    }
}

也许你可以使用类似的东西:


function onClick(animenameId) {
  ...
  // your magic here
  ... 
}

function printOnScreen(animenames, animepaths){
  ...
  elem.onclick =  onClick(animenames[x]);
  ...
}
 

你怎么看?

在任何 DOM 事件处理程序中,触发事件的元素可通过 this 关键字在处理程序中使用。因此,要获取触发事件的按钮的 id,您只需使用:this.id.

这是一个例子:

document.querySelector("button").addEventListener("click", function(){
  console.log("The button's id is: " + this.id);
});
<button id="btn">Click Me</button>

如果您有多个按钮,您应该通过 class 而不是 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)
  });

}

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