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

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

score 1 · Answer 1 · answered Apr 15 '21 at 18:07

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>

answered Apr 15 '21 at 18:07

Scott Marcus

64,069
6
49
71

Couldn't get this to work, I'm pretty sure that's because I'm fairly unfamiliar with EventListeners, but the comment from @helle works perfectly! – Goldquick Apr 15 '21 at 18:21

helle · Accepted Answer · 2021-04-15T18:32:06.350

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

Thank you so much, it works perfectly! It took me 5minutes to realize that "addEventListener" was missing a capital L but it works perfectly thank you for taking your time! — Goldquick, Apr 15 '21 at 18:20

score 0 · Answer 3 · answered Apr 15 '21 at 18:03

0

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?

answered Apr 15 '21 at 18:03

Otavio Augusto

316
3
9

I've tried it out and sadly it doesn't work. I did a quick test with the code you gave and used this function function onClick(animenameId) { console.log(animenameId) } but it just instantly console logs every animeid – Goldquick Apr 15 '21 at 18:07

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

3 Answers3