Javascript 通过JS中的onclick访问对象外部的方法

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

到目前为止，我已经创建了一个对象名“Tags”。所述对象的方法之一是“onDelete”，应该在“onclick”事件之后执行

功能标签（元素）{
让arrayOfList=['tag1'，'tag2'，'tag3']
让DOMParent=document.querySelector（元素）
让我列出
让多明普特
函数DOMCreate（）{
设ul=document.createElement（'ul'）
设li=document.createElement（'li'）
让输入=document.createElement（'input'）
DOMParent.appendChild（ul）
DOMParent.appendChild（输入）
DOMList=DOMParent.firstElementChild
DOMInput=DOMParent.lastElementChild
}
函数domdrender（）{
//清除整个
内部

DOMList.innerHTML=“”
//将每个
渲染为

arrayOfList.forEach（函数（currentValue，索引）{
DOMList.innerHTML+=`
${currentValue}

但是，当单击标记时，我收到了未捕获的引用错误：未定义onDelete

有人能告诉我吗？
您的
onDelete
标识符只在
标记
函数中起作用，但是
onclick
内联处理程序只能看到全局范围的变量，因此
onclick=“onDelete（0）
引发错误，因为内联处理程序无法看到本地范围的
onDelete

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

函数domdrender（）{
//清除整个
内部

DOMList.innerHTML=“”
//将每个
渲染为

arrayOfList.forEach（函数（currentValue，索引）{
const li=DOMList.appendChild（document.createElement（'li'））；
li.innerHTML=`${currentValue}`
li.querySelector（'a'）.addEventListener（'click'，（）=>onDelete（index））；
})
}
不要使用
onclick
属性，而是像您在
onKeyUp（）中所做的那样使用
.addEventListener（）
生成一个最小的可验证示例感谢您对@CertainPerformance的清晰解释。事实上，这对我很有用，我觉得您的方法很有帮助。
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")

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

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));
    })
}