Question

我正在构建一个todo应用程序，我使用javascript动态生成任务。[ (sample ouput) ] 每当我点击添加按钮时，我都会从js生成以下等效的html：

＆＃13;

<div class="row datasection">
  <div class="todo">
    <div class="databox col s6 offset-s1 waves-effect">
      <p class="checkglyph1 checkglyph2">Task no 1</p>
      <a>
        <i class="material-icons checkglyph checkglyph1 checkglyph2 glyphcolor">check</i>
      </a>
    </div>
  </div>
</div>

＆＃13;

现在我想要的是每当我点击创建的任务上的事件时它应该变成黄色的颜色。我已经写了代码。但是，只有在创建了一个任务时它才能正常工作。如果有多个，那么最后一个任务运行良好但第一个上的actionlistener似乎不起作用。我无法弄清楚代码在哪里破坏。

＆＃13;

var glyph= document.querySelectorAll(".glyphcolor");

for (var i = 0; i < glyph.length; i++) {
    glyph[i].addEventListener('click', function(event) {
        this.classList.toggle("checkglyph1");
    });
}

＆＃13;

实际代码段

//declaration
    var calendardata = document.getElementById('date1');
    var addbutton = document.querySelector('.addbutton');
    var todo = document.querySelector('.todo');
    addbutton.addEventListener('click', function() {

/* body to return the html */

      if (data.value) {
        var newdiv = document.createElement("div"); // Create a <button> element
        newdiv.classList.add("databox", "col", "s6", "waves-effect");
        //console.log(newdiv);
        todo.appendChild(newdiv);
        //console.log(newdiv.parentNode);
        var newpar = document.createElement("p");
        newpar.classList.add("checkglyph1", "checkglyph2");
        var node = document.createTextNode(data.value + "." + "      " + 
        calendardata.value);
        var newa = document.createElement("a");
        newdiv.appendChild(newa)
        var newglyph = document.createElement("i");
        newglyph.classList.add("material-icons", "checkglyph", "checkglyph1", 
        "checkglyph2", "glyphcolor");
        var node1 = document.createTextNode("check");
        newa.appendChild(newglyph);
        newglyph.append(node1);
        newpar.appendChild(node);
        newdiv.appendChild(newpar);
        data.value = "";
        calendardata.value = "";
        created = true;
      //  console.log("before glyh created");

        //code to perform action on the click of the tick symbol

        var glyph = document.querySelectorAll(".glyphcolor");
        var par = document.getElementsByClassName('checkglyph2');
        for (var i = 0; i < glyph.length; i++) {
    //console.log("Inside the loop");
    glyph[i].addEventListener('click', function.bind(event) {
        this.classList.toggle("checkglyph1");
        //console.log('Inside the click');
        //console.log(i);
    });


}   

      }
    })

Answer 1

当他们创建其他任务时，他们没有在Node Collection中收集，因此他们没有事件监听器。你可以做的是将事件监听器添加到容器中并更改被点击的项目：

document.querySelector('ul').addEventListener('click', changeClass);
document.querySelector('#button').addEventListener('click', addLi);

function changeClass(e){
  e.target.closest('li').classList.toggle('checkglyph1');
}

function addLi(e){
  const new_li = document.createElement('li');
  new_li.textContent = document.querySelectorAll('li').length + 1;
  new_li.classList.add('checkglyph1');
  document.querySelector('ul').appendChild(new_li);
}

li:not(.checkglyph1) {
  background: #f00;
}

<button id="button">Add li</button>
<ul>
  <li class="checkglyph1">1</li>
  <li class="checkglyph1">2</li>
  <li class="checkglyph1 red">3</li>
  <li class="checkglyph1">4</li>
  <li class="checkglyph1">5</li>
  <li class="checkglyph1">6</li>
  <li class="checkglyph1">7</li>
  <li class="checkglyph1">8</li>
  <li class="checkglyph1">9</li>
  <li class="checkglyph1">10</li>
</ul>

Answer 2

您的代码存在的问题是每次点击＆＃34; .addbutton＆＃34;时，您都会浏览所有＆＃34; .glyphcolor＆＃34; s in你的DOM并添加一个新的onclick事件监听器。创建的最后一个将起作用，但其他人将重复多个事件监听器（是的，这是可能的）。所以，当你点击一个有两个事件的元素告诉它切换＆＃34; checkglyph1＆＃34;上课，它会做两次。当然，它根本不会改变。您可以很容易地看到这种情况发生，因为页面中的所有奇数元素都必须工作（它们将按奇数次切换类），而偶数元素则不能。

可以通过在页面上创建元素时直接在元素上添加事件侦听器来更正此问题。下面的代码必须正常工作：

transactions

只是一点点澄清：你不需要＆＃34; bind＆＃34;在你的实际代码中。

//declaration
var calendardata = document.getElementById('date1');
var addbutton = document.querySelector('.addbutton');
var todo = document.querySelector('.todo');

addbutton.addEventListener('click', function() {
  if (data.value) {
    var newdiv = document.createElement("div"); // Create a <button> element
    newdiv.classList.add("databox", "col", "s6", "waves-effect");
    //console.log(newdiv);
    todo.appendChild(newdiv);
    //console.log(newdiv.parentNode);
    var newpar = document.createElement("p");
    newpar.classList.add("checkglyph1", "checkglyph2");
    var node = document.createTextNode(data.value + "." + "      " + 
    calendardata.value);
    var newa = document.createElement("a");
    newdiv.appendChild(newa)
    var newglyph = document.createElement("i");
    newglyph.classList.add("material-icons", "checkglyph", "checkglyph1", 
    "checkglyph2", "glyphcolor");
    var node1 = document.createTextNode("check");
    newa.appendChild(newglyph);
    newglyph.append(node1);
    newpar.appendChild(node);
    newdiv.appendChild(newpar);
    data.value = "";
    calendardata.value = "";
    created = true;

    newglyph.addEventListener('click', function(event) {
        event.preventDefault(); // Just to prevent non desired effects of click

        newglyph.classList.toggle('checkglyph1');
    }
   }
 }

没有在以下js代码中添加Eventlisteners

2 个答案: