const addToCartButtons = document.getElementsByClassName('add-to-cart');
const addToCartButtonsArray = Array.from(addToCartButtons);
const increment = document.createElement('img');
increment.setAttribute('src', '/assets/images/icon-increment-quantity.svg');
increment.style.zIndex = '0';
increment.style.width = '15px';
increment.style.marginBottom = '0.5px';
increment.style.marginRight = '6px';
increment.style.border = 'none';
increment.style.cursor = 'pointer';
const decrement = document.createElement('img');
decrement.setAttribute('src', '/assets/images/icon-decrement-quantity.svg');
decrement.style.zIndex = '1';
decrement.style.width = '15px';
decrement.style.marginBottom = '0.5px';
decrement.style.marginLeft = '6px';
decrement.style.border = 'none';
decrement.style.cursor = 'pointer';
const quantity = document.createElement('span');
quantity.textContent = 0;
const addToCartButtonOnHover = document.createElement('div'); // new element when hovering
addToCartButtonOnHover.classList.add('add-to-cart-on-hover');
addToCartButtonsArray.forEach((button, index) => {
button.addEventListener('mouseover', (e) => {
const element = e.target.parentElement;
element.replaceChild(addToCartButtonOnHover, element.children[0]); // replaces old add-to-cart button with the hover one
addToCartButtonOnHover.append(decrement, quantity, increment);
let count = 0;
increment.onclick = function() {
count += 1;
quantity.textContent = count;
}
// adding and deducting products
decrement.onclick = function() {
count -= 1;
if (count < 0) {
count = 0;
}
quantity.textContent = count;
}
});
addToCartButtonOnHover.addEventListener('mouseleave', (e) => {
const element = e.target.parentElement;
element.replaceChild(addToCartButtonsArray[index], element.children[0]); // returns the old add-to-cart button
});
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Red Hat Text';
}
body {
display: flex;
height: 100vh;
justify-content: space-evenly;
}
.products {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.product {
flex-direction: column;
align-items: center;
width: 30%;
height: 43vh;
margin-left: 0;
margin-bottom: 5%;
margin: 50px;
}
.add-to-cart {
border: 1px solid hsl(14, 65%, 9%);
border-radius: 20px;
margin-left: 16%;
text-align: center;
width: 10vw;
height: 5vh;
line-height: 4.5vh;
background-color: white;
}
.add-to-cart-on-hover {
border: 1px solid hsl(14, 65%, 9%);
border-radius: 20px;
text-align: center;
margin-left: 16%;
display: flex;
justify-content: space-between;
align-items: center;
width: 10vw;
height: 5vh;
background-color: orange;
} <div class="products">
<div class="product">
<div class="add-to-cart">Add to cart</div>
</div>
<div class="product">
<div class="add-to-cart">Add to cart</div>
</div>
</div>Can we utilize an iterated element as a new child in the replaceChild() function? The current code works only on the first button because it's accessed using 'array[0' in the second event listener. I aim for both buttons to behave similarly, but adjusting the index causes one to disappear. Looping through the addToCartButtonsArray inside the event listener was attempted without success. How can both buttons work identically?