通过 JS 中的 onclick 访问 object 之外的方法

Question

我是 JS 新手，还没有遇到这些挑战。 已经过去了 6 个小时，考虑到我不知道到底发生了什么，我不知道从哪里开始。

到目前为止，我已经创建了一个 Object 名称“标签”。 上述object的方法之一是“onDelete”，需要在“onclick”事件后执行。

function Tags( element ) {

    let arrayOfList     = ['tag1', 'tag2', 'tag3']
    let DOMParent       = document.querySelector( element )
    let DOMList
    let DOMInput

    function DOMCreate() {
        let ul      = document.createElement('ul')
        let li      = document.createElement('li')
        let input   = document.createElement('input')

        DOMParent.appendChild( ul )
        DOMParent.appendChild( input )

        DOMList     = DOMParent.firstElementChild
        DOMInput = DOMParent.lastElementChild
    }

    function DOMRender() {
        // clear the entire <li> inside <ul> 
        DOMList.innerHTML = ''

        // render each <li> to <ul>
        arrayOfList.forEach( function( currentValue, index ) {
            DOMList.innerHTML += `<li>${currentValue} <a href='#' onclick='onDelete(${index})'>&times;</li>`
        })
    }

    function onKeyUp() {
        DOMInput.addEventListener( 'keyup', function() {
            let text = this.value.trim()

            if ( text.includes(',') ) {
                // check if empty text when ',' is remove
                if ( text.replace(',', '') != '') {
                    // push to array and remove ','
                    arrayOfList.push( text.replace(',' , '') )
                }
                // clear input
                this.value = ''
            }

            DOMRender()
        })
    }

    function onDelete( id ) {
        console.log( id )
    }

    DOMCreate()
    DOMRender()
    onKeyUp()
}

new Tags("#div_tags")

HTML 很简单：

<div id="div_tags"></div>

现在，我检查了 DOM，并且存在 onlick，请参阅：

但是，当单击标签时，我收到Uncaught ReferenceError: onDelete is not defined

有人可以启发我吗？

Answer 1

您的onDelete标识符仅在Tags function 内的范围内，但onclick内联处理程序只能看到全局范围的变量，因此onclick="onDelete(0)会引发错误，因为内联处理程序看不到本地范围的onDelete 。

虽然您可以通过将onDelete分配给window来修复它，但最好完全避免内联处理程序 - 它们有 scope 问题，通常被认为是非常糟糕的做法。 相反，使用addEventListener将事件侦听器附加到创建a （以及 append 通过appendChild而不是与innerHTML连接的ul的li ，以便侦听器在以后的迭代中不会损坏 - 分配给容器的innerHTML删除以前的任何听众）

function DOMRender() {
    // clear the entire <li> inside <ul> 
    DOMList.innerHTML = ''

    // render each <li> to <ul>
    arrayOfList.forEach( function( currentValue, index ) {
        const li = DOMList.appendChild(document.createElement('li'));
        li.innerHTML = `${currentValue} <a href='#'>&times;</a>`
        li.querySelector('a').addEventListener('click', () => onDelete(index));
    })
}