addEventListener() 和 createElement()
addEventListener() and createElement()
我想问一下如何对使用 createElement() 创建的元素执行 addEventListner()。
我的项目中有一个添加按钮,当我点击它时,它会创建另一个添加按钮,并继续使用该按钮制作添加按钮。
但我的第一个按钮可以正常工作并继续创建新按钮,但其他按钮没有任何作用。
这是我的代码。
const addBtn = document.querySelector('.button');
const total = document.getElementById('amount-total');
addBtn.addEventListener('click', addButton);
let counter = 0;
function addButton(){
counter++;
let newDiv = document.createElement('div');
newDiv.id = 'new-container' + counter;
total.parentNode.insertBefore(newDiv, total)
let createBtn = document.createElement('button');
createBtn.innerHTML = '+';
createBtn.className = 'button';
newDiv.appendChild(createBtn);
}
但它不起作用,所以我改用 querySelectorAll。
const addBtns = document.querySelectorAll('.button');
addBtns.forEach(btn => btn.addEventListener('click', addButton))
但原来的一个仍然有效,而另一个则不行。
我是 javascript 的新手,如果您能帮助我,我将不胜感激。
谢谢。
如果我没理解错的话,你应该在函数addbutton()
中加上addEventListener('click', addButton)
。通过这种方式,您每次单击添加的按钮时也会创建一个新按钮。您的代码:
const addBtn = document.querySelector('.button');
const total = document.getElementById('amount-total');
addBtn.addEventListener('click', addButton);
let counter = 0;
function addButton() {
counter++;
let newDiv = document.createElement('div');
newDiv.id = 'new-container' + counter;
total.parentNode.insertBefore(newDiv, total)
let createBtn = document.createElement('button');
createBtn.innerHTML = '+';
createBtn.addEventListener('click', addButton); //added this line here!
createBtn.className = 'button';
newDiv.appendChild(createBtn);
}
希望对您的理解有所帮助。
我想问一下如何对使用 createElement() 创建的元素执行 addEventListner()。
我的项目中有一个添加按钮,当我点击它时,它会创建另一个添加按钮,并继续使用该按钮制作添加按钮。
但我的第一个按钮可以正常工作并继续创建新按钮,但其他按钮没有任何作用。
这是我的代码。
const addBtn = document.querySelector('.button');
const total = document.getElementById('amount-total');
addBtn.addEventListener('click', addButton);
let counter = 0;
function addButton(){
counter++;
let newDiv = document.createElement('div');
newDiv.id = 'new-container' + counter;
total.parentNode.insertBefore(newDiv, total)
let createBtn = document.createElement('button');
createBtn.innerHTML = '+';
createBtn.className = 'button';
newDiv.appendChild(createBtn);
}
但它不起作用,所以我改用 querySelectorAll。
const addBtns = document.querySelectorAll('.button');
addBtns.forEach(btn => btn.addEventListener('click', addButton))
但原来的一个仍然有效,而另一个则不行。 我是 javascript 的新手,如果您能帮助我,我将不胜感激。
谢谢。
如果我没理解错的话,你应该在函数addbutton()
中加上addEventListener('click', addButton)
。通过这种方式,您每次单击添加的按钮时也会创建一个新按钮。您的代码:
const addBtn = document.querySelector('.button');
const total = document.getElementById('amount-total');
addBtn.addEventListener('click', addButton);
let counter = 0;
function addButton() {
counter++;
let newDiv = document.createElement('div');
newDiv.id = 'new-container' + counter;
total.parentNode.insertBefore(newDiv, total)
let createBtn = document.createElement('button');
createBtn.innerHTML = '+';
createBtn.addEventListener('click', addButton); //added this line here!
createBtn.className = 'button';
newDiv.appendChild(createBtn);
}
希望对您的理解有所帮助。