為什么我的代碼會拋出無效或意外的令牌錯誤？

為什么我的代碼不起作用？解釋器似乎無法將 listItem 變數識別為新元素的字串。由于某種原因，它似乎不起作用。

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)

}

uj5u.com熱心網友回復：

使用反引號代替單引號：

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)

}

uj5u.com熱心網友回復：

我在除錯您的代碼時遇到了一些問題。

1. 我注意到的第一件事是你的函式被命名為creatList，這似乎是一個可能會讓你陷入困境的錯字。雖然您顯然可以隨意命名該函式，但我繼續將其重命名為createList，以避免混淆。

2. 您需要使用反引號 ` 而不是單引號將多行字串括起來。請參閱：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

3. 我還清理了您forEach在createList函式中的實作，然后添加了一個 EventListener 以在 DOM 準備好時呼叫該函式。

下面的代碼有效：

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>

標籤：javascript html

上一篇：如何在具有相同id的標簽后添加wrapAlljquery或php

下一篇：在mongodb中“加入”的嵌套查詢