Javascript 創建按鈕，獲取使用 onclick 按下的按鈕的 ID（

Question

注意：這是我的第一個項目，對不起，如果這很明顯，我到處找都找不到

我正在開發一個網站，它可以作為一個比文件瀏覽器/VLC 更好的用戶界面，所以我制作了一個按鈕，您可以在其中上傳所有視頻文件。 有了這些文件，我的 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);
    }
}

Answer 1

在任何 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>

Answer 2

如果您有多個按鈕，則應通過 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 不能是按鈕標簽的子標簽

Answer 3

也許你可以使用類似的東西：

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

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

你怎么看？