html-close按钮定义使用JavaScript-Stack溢出

顺晟科技

2022-10-19 12:15:26

179

我做了一个定制的Todo列表，除了列表关闭按钮之外，一切都很好，这不起作用，你能给我一个解决方案吗？我拿了一个关闭按钮的源代码，如果你知道更简单的方法，请告诉我...我不明白这个关闭按钮的源代码，也不知道如何修复它。

以下是js代码:

顺晟科技：

我不太确定问题出在哪里，但我只想讨论给html元素的函数和…应该有用..告诉我发生了什么；-；

close按钮代码只在脚本加载后出现，并且只覆盖现有的todos（在本例中只有一个）。

每次创建关闭按钮时都需要定义关闭按钮操作。

let submit   = document.getElementsByClassName('addbutton')[0];
let ul       = document.getElementsByTagName('ul')[0];
let display  = document.getElementById('db');
let li       = document.createElement('li');
li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> ' 
             + display;
             
submit.addEventListener('click', function Addlist() {
  ul.innerHTML += '<li class="list_style">' 
                + '<input type ="submit" value="&#215" class ="unicodes" />'
                + display.value 
                + '</li>';
});

// here is the close button source code
var close = document.getElementsByClassName("unicodes");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

如果要删除待办事项列表，可以通过调用函数来使用触发器删除待办事项列表。

let submit   = document.getElementsByClassName('addbutton')[0];
let ul       = document.getElementsByTagName('ul')[0];
let display  = document.getElementById('db');
let li       = document.createElement('li');
li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> ' 
             + display;
             
submit.addEventListener('click', function Addlist() {
  ul.innerHTML += '<li class="list_style">' 
                + '<input type ="submit" value="&#215" class ="unicodes" />'
                + display.value 
                + '</li>';
});

// here is the close button source code
var close = document.getElementsByClassName("unicodes");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

您没有为新创建的元素绑定关闭操作。将close功能移动到一个函数并在create（或）调用close功能作为onclick属性后调用它。像下面这样替换js代码，它应该可以工作。

let submit   = document.getElementsByClassName('addbutton')[0];
let ul       = document.getElementsByTagName('ul')[0];
let display  = document.getElementById('db');
let li       = document.createElement('li');
li.innerHTML = '<input type ="submit" value="&#215" class ="unicodes" /> ' 
             + display;
             
submit.addEventListener('click', function Addlist() {
  ul.innerHTML += '<li class="list_style">' 
                + '<input type ="submit" value="&#215" class ="unicodes" />'
                + display.value 
                + '</li>';
});

// here is the close button source code
var close = document.getElementsByClassName("unicodes");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

上一篇：从HTML输入添加小计，并使用Jav 下一篇：Python bs4 HTML内容无

网站建设

Html

html-close按钮定义使用JavaScript-Stack溢出