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 不能是按钮标签的子项
注意:这是我的第一个项目,很抱歉,如果这很明显,我到处都找不到
我正在开发一个比文件 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 不能是按钮标签的子项