Question

是否可以使用位于侦听器中的变量/值进行操作？此代码是我的待办事项列表的简介。问题是，每次我尝试单击新列表项时，itemArr为空。我需要以某种方式返回itemArr。

const input = document.querySelector('input'),
const list = document.querySelector('.list'); //ul

let itemArr = [];

input.addEventListener('keyup', function(e) {

    if (e.keyCode == 13) { 
        let item = document.createElement('li');

        item.textContent = getValue();
        item.classList.add('to-do-item');
        list.appendChild(item);

        input.value = '';

        itemArr.push(item);
    }
}, false);

itemArr.forEach(function (liItem) {
    liItem.addEventListener('click', function() {
        console.log('test');
    });
});


function getValue() {
    return input.value.charAt(0).toUpperCase() + input.value.substring(1);
}

Answer 1

在用户在文本框中输入内容之前，您要遍历itemArr，因此当时为空。

以后添加的项目将不会被迭代。

您可以通过两种方法解决此问题：

添加列表项时添加侦听器：

input.addEventListener('keyup', function(e) {

    if (e.keyCode == 13) { 
        let item = document.createElement('li');

        item.textContent = getValue();
        item.classList.add('to-do-item');
        list.appendChild(item);

        input.value = '';

        item.addEventListener('click', function() {
            console.log('test');
        });

        itemArr.push(item);
    }
}, false);

向父级添加单个侦听器，然后根据event.target执行操作：

list.addEventListener('click', function (e) {
    if(e.target === e.currentTarget) return //The <ul> was clicked, ignore it
    console.log('test')
    console.log('The clicked element is:', e.target)
})

如何从侦听器获取itemArr的值？

1 个答案: