¿Por qué mi código no funciona? parece que el intérprete no reconoce la variable listItem como una cadena de nuevos elementos. No parece funcionar por alguna razón.
const draggable_list = document.getElementById("draggable-list") const check = document.getElementById("check") const richestPeople = [ 'Jeff Bezos', 'Elon Musk', 'Bernard arnault', 'Bill Gates', 'Mark Zuckerberg', 'Warren Buffet', 'Larry Ellison', 'Larry Page', 'Sergery Brin', ] const listItems = [] let dragStartIndex //createList() function creatList(){ [...richestPeople.forEach((person, index) => { const listItem = document.createElement('li') listItem.setAttribute('data-index', index) //the code below does not seem to light up as a string. listItem.innerHTML = ' <span class="number">${index + 1}</span> <div class="draggable" draggable="true"></div> <p class="person-name">${person}</p> <i class="fas fa-grip-lines"></i> ' listItems.push(listItem) draggable_list.appendChild(listItem) })] listItems.push(listItem) draggable_list.appendChild(listItem) }Utilice acentos graves en lugar de comillas simples:
const draggable_list = document.getElementById("draggable-list") const check = document.getElementById("check") const richestPeople = [ 'Jeff Bezos', 'Elon Musk', 'Bernard arnault', 'Bill Gates', 'Mark Zuckerberg', 'Warren Buffet', 'Larry Ellison', 'Larry Page', 'Sergery Brin', ] const listItems = [] let dragStartIndex //createList() function creatList(){ [...richestPeople.forEach((person, index) => { const listItem = document.createElement('li') listItem.setAttribute('data-index', index) //the code below does not seem to light up as a string. listItem.innerHTML = ` <span class="number">${index + 1}</span> <div class="draggable" draggable="true"></div> <p class="person-name">${person}</p> <i class="fas fa-grip-lines"></i> ` listItems.push(listItem) draggable_list.appendChild(listItem) })] listItems.push(listItem) draggable_list.appendChild(listItem) }Hubo algunos problemas con los que me encontré al depurar su código.
Lo primero que noté fue que su función se llama creatList , lo que parece ser un error tipográfico que probablemente lo meta en problemas. Si bien obviamente puede nombrar la función como desee, seguí adelante y le cambié el nombre a createList para evitar confusiones.
Debe usar acentos graves ` en lugar de comillas simples para encerrar cadenas de varias líneas. Ver: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
También limpié su implementación forEach en la función createList , luego agregué un EventListener para llamar a la función cuando el DOM esté listo.
El siguiente código funciona:
const draggable_list = document.getElementById("draggable-list"); const check = document.getElementById("check"); const richestPeople = [ 'Jeff Bezos', 'Elon Musk', 'Bernard arnault', 'Bill Gates', 'Mark Zuckerberg', 'Warren Buffet', 'Larry Ellison', 'Larry Page', 'Sergery Brin', ]; const listItems = []; let dragStartIndex; //createList() function createList() { richestPeople.forEach((person, index) => { let listItem = document.createElement('li'); listItem.setAttribute('data-index', index); listItem.innerHTML = ` <span class="number">${index + 1}</span> <div class="draggable" draggable="true"></div> <p class="person-name">${person}</p> <i class="fas fa-grip-lines"></i> `; listItems.push(listItem); draggable_list.appendChild(listItem); }); } window.addEventListener('DOMContentLoaded', createList(), false); <div id="draggable-list"></div> <div id="check"></div>