Menu
I’ve created a dynamically generated carousel in JavaScript, where i use a for loop to iterate over an array of products and create a container div, img/title/ nodes and then append all of that to a root div i have on my markup. It works for all the main browsers (even Edge) EXCEPT IE. I’ve searched and tried many things but still not showing the elements i generate, and the console doesnt show anything wrong.
HTML:
<div class=”carousel-view” id=”carousel-view”></div>
JS:
carouselItems(productData) {
let carousel = this.carousel();
for (let i = 0; i < productData.length; i++) {
let product = document.createElement(‘div’);
product.setAttribute(‘class’, ‘product’);
product.setAttribute(‘id’, ‘product’ + i);
let a = document.createElement(‘div’);
a.setAttribute(‘id’,’product-link’);
// modal
a.addEventListener(‘click’, () => {
console.log(“item”, productData[i]);
this.productCallback(productData[i]);
});
let img = document.createElement(‘img’);
let title = document.createElement(‘p’);
// title.setAttribute(‘class’, ‘product-title’);
title.id = ‘product-title’;
let price = document.createElement(‘p’);
price.setAttribute(‘class’, ‘product-price’);
// a.appendChild(img);
// a.appendChild(title);
product.appendChild(a);
product.appendChild(price);
carousel.appendChild(product);
a.href = productData[i].productUrl;
img.src = productData[i].imageSrc;
}
}