我创建了一个新的H4元素,该元素将按预期方式在DOM中呈现。问题是,元素不是永久呈现。
突然单击另一个图像(仅2个图像标签),然后将H4元素添加到下一个图像,但将另一个图像移除。我环顾四周,找不到相关主题。
感谢您的帮助。
class Player {
constructor() {
// Add elements and content for clicks.
this.addHeader = document.createElement("h4");
this.text = document.createTextNode('The number of times you have clicked:')
this.addHeader.appendChild(this.text);
console.log(this.addHeader);
// Obtain images from HTML.
this.images = document.querySelectorAll('.cat-image');
}
// Update when the image is clicked.
update() {
for (const image of this.images) {
let compareSrc = image.attributes.getNamedItem('src'),
ifcontainsH4 = Array.from(image.parentElement.childNodes).includes('h4');
image.addEventListener('click', (e) => {
(compareSrc === compareSrc) && !ifcontainsH4
? image.parentElement.insertBefore(this.addHeader, image.parentElement.children[1])
: console.log('Parent element contains a h4 tag.');
e.preventDefault();
})
}
}
}
// Instance of class Player.
const player = new Player();
// Loop for event listeners that are apart of a class.
(function loop() {
player.update();
})(this)
答案 0 :(得分:0)
this.addHeader在构造Player时运行,每次单击都将引用它。因此,它只是将相同的h4元素移到每个单击的图像上。
如果您希望在每次点击时添加新的h4,则每个点击处理程序都应创建自己的h4元素。