我无法在javascript中选择特定的按钮，因为它存在并且存在

Question

我正在做一个项目，所以我正在做一个网站。我的问题是，当我试图选择和添加一个点击事件在一个特定的按钮，它不工作，而按钮为sur存在，并与其他按钮工作。我不能选择的按钮是btn1EventClick和btn2EventClick下面是我的代码:

HTML:

<div id="products">
<div class="product-1">
<div class="fourchette">
<h2>Fourchette enrouleuse de spaghetti</h2>
<img src="fourchette.png" alt="">
</div>
<div class="btn1"><button></button>
</div>
</div>
<div class="product-2">
<div class="btn2"><button></button></div>
<div class="cuillere">
<h2>Cuillère mélangeuse de yahourt</h2>
<img src="cuillere.png" alt="">
</div>
</div>
</div>
<div class="default-html-p1">
<div class="fourchette">
<h2>Fourchette enrouleuse de spaghetti</h2>
<img src="fourchette.png" alt="">
</div>
<div class="btn1"><button></button>
</div>
</div>
<div class="default-html-p2">
<div class="btn2"><button></button></div>
<div class="cuillere">
<h2>Cuillère mélangeuse de yahourt</h2>
<img src="cuillere.png" alt="">
</div>
</div>
<div class="click-event-btn1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="btn2"><button></button></div>
</div>
<div class="click-event-btn2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="btn1"><button></button></div>
</div>

Javascript:

let btn1 = document.querySelector('.product-1 .btn1');
let btn2 = document.querySelector('.product-2 .btn2');
let fourchette = document.querySelector('#products .product-1 img[src="fourchette.png"]')
let cuillere = document.querySelector('#products .product-2 img[src="cuillere.png"]')
let products = document.getElementById('products');
let product1 = document.querySelector('#products .product-1');
let product2 = document.querySelector('#products .product-2');
let clickEventbtn1 = document.querySelector('.click-event-btn1');
let clickEventbtn2 = document.querySelector('.click-event-btn2');
let btn1EventClick = document.querySelector('.click-event-btn2 .btn1 button');
let btn2EventClick = document.querySelector('.click-event-btn1 .btn2 button');
let defaultHtmlProduct1 = document.querySelector('.default-html-p1')
btn1.addEventListener('click', () => {
product2.innerHTML = clickEventbtn1.innerHTML;
document.querySelector('.btn2 button').style.position = "absolute";
document.querySelector('.btn2 button').style.right = "110px";
document.querySelector('.btn2 button').style.bottom = "5vh";
btn1.style.display = "none";
fourchette.style.animation = "rotateanim 1.5s linear";
products.style.columnGap = "0";
})
btn2.addEventListener('click', () => {
product1.innerHTML = clickEventbtn2.innerHTML;
document.querySelector('.btn1 button').style.position = "absolute";
document.querySelector('.btn1 button').style.left = "110px";
document.querySelector('.btn1 button'). style.bottom = "5vh";
btn2.style.display = "none";
cuillere.style.animation = "rotateanim 1.5s linear forwards";
products.style.columnGap = "0";
})
btn1EventClick.addEventListener('click', () => {
product1.innerHTML = defaultHtmlProduct1.innerHTML;
})

你能告诉我问题在哪里吗?因为我已经找了几个小时了。

Answer 1

问题在于您将侦听器添加到DOM元素中，然后用其他元素替换它们。

你有(去掉脂肪)

let btn1 = document.querySelector('.product-1 .btn1'); //Get btn1 dom node
let product1 = document.querySelector('#products .product-1'); //Get product one dom node
btn1.addEventListener('click', () => {}); //add event to btn1 dom node
let defaultHtmlProduct1 = document.querySelector('.default-html-p1');
product1.innerHTML = defaultHtmlProduct1.innerHTML;//replace everything in product1 with new html.

最后，btn1是一个不存在的dom节点，因为它被一个新的dom节点取代了，虽然名称相同，但它不是完全相同的对象。

当您替换它们时，您需要将事件重新绑定到不同的节点，但也需要重新获取节点本身。