Javascript 创建按钮，获取使用 onclick 按下的按钮的 ID（

Question

Note: this is my first project, sorry if this is obvious, I've looked everywhere and can't find it

I'm working on a website that would serve as a better UI then file explorer/VLC, so I've made a button where you can upload all your video files. With those file, my Javascript has a for loop to create a button for each individual video found in that directory, then it puts the name of the file in the button. And all that works, now what I'm struggling with is creating an onclick event that gets the ID of the button that was pressed. I'm really struggling on doing this so any help would be appreciated.

My 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);
    }
}

Answer 1

In any DOM event handler, the element that triggered the event is available within the handler via the this keyword. Therefore, to get the id of the button that triggered the event, you'd just use: this.id .

Here's an example:

 document.querySelector("button").addEventListener("click", function(){ console.log("The button's id is: " + this.id); });

 <button id="btn">Click Me</button>

Answer 2

If you have more than 1 button you should identify the group of buttons via a class not an id.

in your case it's even easier, as you create the button pro grammatically, so we could create the event there...

//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)
  });

}

As you can see I removed your h1, as H1 cannot be a child of the button-tag

Answer 3

Maybe you can use something like:

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

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

What do you think?