Why does my code not work? it seems that the interpreter does not recognize the listItem variable as a string of new elements. It does not seem to work for some reason.

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 >${index   1}</span>
            <div  draggable="true"></div>
            <p >${person}</p>
            <i ></i>
        '
    listItems.push(listItem)
        draggable_list.appendChild(listItem)

    })]

    listItems.push(listItem)
    draggable_list.appendChild(listItem)

}

CodePudding user response：

Use backticks instead of single quotes:

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 >${index   1}</span>
            <div  draggable="true"></div>
            <p >${person}</p>
            <i ></i>
        `
    listItems.push(listItem)
        draggable_list.appendChild(listItem)

    })]

    listItems.push(listItem)
    draggable_list.appendChild(listItem)

}

CodePudding user response：

There were a few issues that I ran into debugging your code.

1. The first thing I noticed was you're function is named creatList, which appears to be a typo that is likely to get you into trouble. While you can obviously name the function anything you want, I went ahead and renamed it to createList in order to avoid confusion.

2. You need to use backticks ` rather than single quotes to enclose multi-line strings. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

3. I also cleaned up your forEach implementation in the createList function, then added an EventListener to call the function when the DOM is ready.

The code below works:

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 >${index   1}</span>
            <div  draggable="true"></div>
            <p >${person}</p>
            <i ></i>
        `;

        listItems.push(listItem);
        draggable_list.appendChild(listItem);


    });


}

window.addEventListener('DOMContentLoaded', createList(), false);

<div id="draggable-list"></div>

<div id="check"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>