Javascript：事件监听器不起作用
[英]Javascript : Event Listener not working
问题描述
我是一名JavaScript初学者，正尝试制作一个简单的列表，用户可以在其中添加或删除项目。 将项目添加到列表可以，但是事件侦听器无法删除项目。
txt = document.getElementById('txt_input'); submit = document.getElementById('txt_submit'); removeBtn = document.getElementsByClassName('remove'); window.onload = txt.focus(); submit.onclick = addToList; for (var i = 0; i < removeBtn.length; i++) { if (document.querySelector("li") !== null) { removeBtn[i].onclick = removeFromList; } } function removeFromList(e) { event.target.parentNode.outerHTML = ""; } function createRemoveButton(parent) { var listBtn = document.createElement('input'); listBtn.setAttribute('type', 'submit'); listBtn.setAttribute('value', 'Remove'); listBtn.setAttribute('class', 'remove'); listBtn.style.marginLeft = '20px'; parent.appendChild(listBtn); } var list; function addToList() { if (document.querySelector("ul") === null) { list = document.createElement('ul'); } var listItem = document.createElement('li'); var txtNode = document.createTextNode(txt.value); listItem.appendChild(txtNode); createRemoveButton(listItem); list.appendChild(listItem); document.body.appendChild(list); txt.value = ''; txt.focus(); }
<input type="text" id="txt_input"> <input type="submit" value="Add" id="txt_submit">
2 个解决方案
解决方案1
3 已采纳 2018-02-05 17:52:31
您有两个主要问题
您正在使用未声明的变量event
function removeFromList(e) {
event.target.parentNode.outerHTML = "";
^
您需要将click事件绑定到新元素。
查看这些代码片段以及这些修复程序。
<body> <input type="text" id="txt_input"> <input type="submit" value="Add" id="txt_submit"> <script> txt = document.getElementById('txt_input'); submit = document.getElementById('txt_submit'); removeBtn = document.getElementsByClassName('remove'); window.onload = txt.focus(); submit.onclick = addToList; for (var i = 0; i < removeBtn.length; i++) { removeBtn[i].onclick = removeFromList; } function removeFromList(e) { e.target.parentNode.outerHTML = ""; } function createRemoveButton(parent) { var listBtn = document.createElement('input'); listBtn.setAttribute('type', 'submit'); listBtn.setAttribute('value', 'Remove'); listBtn.setAttribute('class', 'remove'); listBtn.style.marginLeft = '20px'; listBtn.addEventListener('click', removeFromList) parent.appendChild(listBtn); } var list; function addToList() { if (document.querySelector("ul") === null) { list = document.createElement('ul'); } var listItem = document.createElement('li'); var txtNode = document.createTextNode(txt.value); listItem.appendChild(txtNode); createRemoveButton(listItem); list.appendChild(listItem); document.body.appendChild(list); txt.value = ''; txt.focus(); } </script> </body>
看到？ 现在正在删除元素。
解决方案2
0 2018-02-05 18:19:12
<body> <input type="text" id="txt_input"> <input type="submit" onclick="addToList()" value="Add"> <script> txt = document.getElementById('txt_input'); window.onload = txt.focus(); function removeFromList(e) { e.target.parentNode.outerHTML = ""; txt.focus(); } function createRemoveButton(parent) { var listBtn = document.createElement('input'); listBtn.setAttribute('type', 'submit'); listBtn.setAttribute('value', 'Remove'); listBtn.setAttribute('class', 'remove'); listBtn.style.marginLeft = '20px'; listBtn.addEventListener('click', removeFromList) parent.appendChild(listBtn); } var list; function addToList() { if (document.querySelector("ul") === null) { list = document.createElement('ul'); } var listItem = document.createElement('li'); var txtNode = document.createTextNode(txt.value); listItem.appendChild(txtNode); createRemoveButton(listItem); list.appendChild(listItem); document.body.appendChild(list); txt.value = ''; txt.focus(); } </script> </body>
Javascript-Algolia自动完成模糊事件监听器不起作用
[英]Javascript - Algolia autocomplete blur event listener not working
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.