Estoy tratando de crear un efecto de tipo netflix con CSS y JavaScript donde las cosas se muestran en un carrusel usando flexbox e intento agregar el elemento flexible en el contenedor con JavaScript mientras uso una API para obtener datos, así que nunca se sabe cuántos elementos habrá. ser pero nada que funcione con el JavaScript.
const container = document.getElementById("container"); var newDiv = document.createElement("div"); newDiv.className = "item"; var arr = ["1","1","1"]; const map = arr.map(x => {return `<div>${x}</div>`}); console.log(map) map.forEach(function(element){ newDiv.innerHTML = element; container.append(newDiv) });El contenedor tiene el contenedor de clase y los divs adicionales tienen los elementos de clase.
Aquí está el HTML:
<body> <!--Title for the Page--> <h1 id="title">Will and Amys Movie App</h1> <!--Grid Layout--> <div id="container"> <div class="item"></div> </div> </body> Uncaught TypeError: container is null <anonymous> file:///D:/Github/MovieSummerProject22/script.js:8 <anonymous> file:///D:/Github/MovieSummerProject22/script.js:4 script.js:8:5 <anonymous> file:///D:/Github/MovieSummerProject22/script.js:8 map self-hosted:180 <anonymous> file:///D:/Github/MovieSummerProject22/script.js:4cambie su newDiv.innerHTML = element; a newDiv.innerHTML += element;
Además, esto se puede mejorar un poco y puede usar solo el map , sin necesidad de hacer un bucle dos veces
Tenga en cuenta que está creando un div adicional, que no desea.
const container = document.getElementById("container"); const arr = ["1", "1", "1"]; arr.map(x => { const newDiv = document.createElement("div"); newDiv.className = "item"; newDiv.innerHTML += x; container.append(newDiv) }); <div id="container"></div>