Question

基本上我有这个小代码片段，这对我来说是一个反复出现的问题，（显示错误信息）我在函数内创建一个按钮，但是当我尝试添加一个事件监听器时以后它不起作用，（我理解它为什么不起作用）。

我试图启动链接到函数外部按钮的变量，就像这样。

var newListItemBtn;

然后它告诉我不能将事件监听器添加到未定义的变量。（我也理解为什么。）

如果我尝试使用代码

启动变量

var newListItemBtn = document.createElement('button');

它在代码运行时创建按钮，而不是在调用函数时创建按钮，因此它将替换新列表中的按钮。

如何在函数外部调用变量并向其添加eventlistener？

＆＃13;

var createListBtn = document.getElementById('createListBtn'),
    listArea = document.getElementById('listArea');

function createList(){
    var list = document.createElement('ul'),
        newListItemBtn = document.createElement('button');
    
    newListItemBtn.classList.add ('newListItemBtn');
    newListItemBtn.innerText = 'New Item';
    list.appendChild(newListItemBtn);
    listArea.appendChild(list);
    return newListItemBtn;
}

createListBtn.addEventListener('click', function(){
    createList();
});

newListItemBtn.addEventListener('click', function(){
    alert('hey');
});

＆＃13;

<!DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="createListBtn">Create List</button>
    <div id="listArea">
    </div>
    <script src="main.js"></script>
</body>
</html>

＆＃13;

Answer 1

这将有效：

＆＃13;

var createListBtn = document.getElementById('createListBtn'),
    listArea = document.getElementById('listArea');

function createList(){
    var list = document.createElement('ul'),
        newListItemBtn = document.createElement('button');
    
    newListItemBtn.classList.add ('newListItemBtn');
    newListItemBtn.innerText = 'New Item';
    list.appendChild(newListItemBtn);
    listArea.appendChild(list);
    
    newListItemBtn.addEventListener('click', function(){
      alert("hi");
    });
}

createListBtn.addEventListener('click', function(){
    createList();
});

＆＃13;

<!DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="createListBtn">Create List</button>
    <div id="listArea">
    </div>
    <script src="main.js"></script>
</body>
</html>

＆＃13;

Answer 2

将click事件监听器添加到您在newListItemBtn函数中声明它的同一范围内的creatList()。

Answer 3

你不能那样做，因为，

newListItemBtn的可变范围仅在createList()功能中可用且无法在外部访问
即使您将newListItemBtn变量定义移到外面，元素也不可用，您仍然会出现JS错误

最好在newListItemBtn函数

createList()

 function createList(){
    var list = document.createElement('ul'),
        newListItemBtn = document.createElement('button');

    newListItemBtn.classList.add ('newListItemBtn');
    newListItemBtn.innerText = 'New Item';

    newListItemBtn.addEventListener('click', function(){
       alert('hey');
    });    

    list.appendChild(newListItemBtn);
    listArea.appendChild(list);
    return newListItemBtn;
}

如何在创建函数之外调用变量？

3 个答案: