Question

我正在制作一个简单的待办事项应用程序，其中具有相应日期的待办事项将以文本输入区域下方的列表形式显示。我为此制作了一个空列表，并继续附加待机，以及日期。但我希望通过点击待办事项，在整个待办事项（不是跨越日期）时发生罢工。我的代码可以列出日期的待办事项，但未能导致删除。我应该在 function struck（ele）中相应地更改 function changeText（）？

executor.map

Answer 1

主要问题是您正在调用onclick函数而不是将其指定为处理程序。

更改

entry.onclick = struck(this);

到

entry.onclick = () => struck(entry);

然后将描述分成它自己的元素，所以它就可以得到删除线。

<body>

<div class="container">
<h1>
 Your todos
</h1>

<input type="text" id="todo" placeholder="Add a new todo and hit enter" onkeydown="store(this)">
<div class="todos">
<ul id="demo"></ul>
</div>
</div>
<script>
var list = document.getElementById('demo');

function store(ele){
    if(event.keyCode==13){
    changeText();
   }
}

function changeText() {
    var data = document.getElementById('todo').value;
    var d = new Date();
    if(data!='')
    {
        var entry = document.createElement('li');
        entry.description = document.createElement('span');
        entry.appendChild(entry.description);
        entry.description.appendChild(document.createTextNode(data));
        entry.appendChild(document.createTextNode(' ' + d.toDateString()));
        entry.onclick = () => struck(entry);
        list.appendChild(entry);
   }
}

function struck(ele) {
    ele.description.style = "text-decoration:line-through; list-style-type:none";
}
</script>
</body>

Answer 2

Eric给出的解决方案效果很好但是如果我可以建议一个小的改动，你的store() function doesn't function on firefox但它确实在chrome上，因此我对它进行了一些改动，你可以使用它作为我找到一个更好的方法。

var enterPressed = function(){
    document.getElementById("todo").onkeyup = function(event) {
    if(event.which == 13)
        changeText();
  };
};

enterPressed();

而不是

function store(ele){
    if(event.keyCode==13){
    changeText();
   }
}
a
and onkeydown in input.

＆＃13;

var list = document.getElementById('demo');

var enterPressed = function(){
    document.getElementById("todo").onkeyup = function(event) {
    if(event.which == 13)
        changeText();
  };
};

function changeText() {
  var data = document.getElementById('todo').value;
  var d = new Date();
  if (data != '') {
    var entry = document.createElement('li');
        entry.description = document.createElement('span');
        entry.appendChild(entry.description);
       entry.description.appendChild(document.createTextNode(data));
        entry.appendChild(document.createTextNode(" " + d.toDateString()));
        entry.onclick = () => struck(entry);
        list.appendChild(entry);
  }
}

function struck(ele) {
  ele.description.style = "text-decoration:line-through; list-style-type:none";
}

enterPressed();

＆＃13;

<div class="container">
  <h1>
    Your todos
  </h1>
  <input type="text" id="todo" placeholder="Add a new todo and hit enter">
  <div class="todos">
    <ul id="demo">
    </ul>
  </div>
</div>

＆＃13;

Answer 3

var $ = function (selector) {
  return document.querySelector(selector);
};

var list = $("#demo");

function store(ele) {
  if (event.keyCode == 13) {
    changeText();
  }
}

function dynamicEvent() {
  this.description.style = "text-decoration:line-through; list-style-type:none";
}

function changeText() {
  var data = $("#todo").value;
  var date = new Date();
  
  if (data) {
    var li = document.createElement("li");
    li.description = document.createElement('span');
    li.className = 'todo'; // Class name
    li.innerHTML = data; // Text inside
    li.appendChild(li.description);
    li.description.appendChild(document.createTextNode(data));
    li.appendChild(document.createTextNode(' ' + date.toDateString()));
    li.onclick = dynamicEvent; // Attach the event!
    $('#demo').appendChild(li); // Append it
  }
}

<div class="container">
  <h1>
 Your todos
</h1>

  <input type="text" id="todo" placeholder="Add a new todo and hit enter" onkeydown="store(this)">
  <div class="todos">
    <ul id="demo"></ul>
  </div>
</div>

Answer 4

我就是这样做的。

＆＃13;

var list = document.getElementById('demo');

const items = [];

const item = e => {
  const el = document.createElement('li');
  el.insertAdjacentHTML('beforeend', `<span class="title">${ e.t }</span><div class="time">${e.d}</div>`);
  const title = el.querySelector('.title');
  const time  = el.querySelector('.time' );
  let strike = 0;
  
  el.addEventListener('click', _ => el.querySelector('span').style.textDecoration = !!(++strike % 2) ? 'line-through' : '');
  
  list.appendChild(el);
  
  return { el, title, time };
};

function store(ele) {
  if (event.keyCode == 13) {
    items.push(item({ t: ele.value, d: (new Date()).toDateString() }));
    console.log(items);
  }
}

＆＃13;

<div class="container">
  <h1>
    Your todos
  </h1>
  <input type="text" id="todo" placeholder="Add a new todo and hit enter" onkeydown="store(this)">
  <div class="todos">
    <ul id="demo"></ul>
  </div>
</div>

＆＃13;

如何将样式添加到最初为空的列表中的动态生成的列表项

4 个答案: