2 Replies - 278 Views - Last Post: 25 August 2019 - 02:37 PM

#1 Fo4ty5`   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 05-June 13

Javascript help

Posted 25 August 2019 - 12:36 PM

Hello I am just learning java script and I have run into a problem while making a to do list app.It is most likely a simple problem but not sure what is going on. I have it on a code pen. https://codepen.io/C...ard/pen/abopxYz the problem is on the function where im trying to add the even listener to the delete class. it does not seem to be getting them i tried to use the querySelector method then loop through it adding the eventlistener.

in the code i did not add the part of adding the evenlistener in the loop since it does not even console.log the target.

This post has been edited by Fo4ty5`: 25 August 2019 - 12:39 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript help

#2 Fo4ty5`   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 05-June 13

Re: Javascript help

Posted 25 August 2019 - 01:26 PM

HTML
<section class="app">
  <div class="app-header">
    <h1>My To Do</h1>
    <input type="text" id="input" class="input" placeholder="To Do..."><button id="submit">add</button></div>
  <div class="app-items">
   <div class="item">
    <p>This is a hardcoded item</p>
     <i class="fas fa-times delete"> </i>  
   </div>
    <div class="item">
    <p>This is a hardcoded item</p>
     <i class="fas fa-times delete"> </i>  
   </div>
  </div>
</section>

Javascript
(function() {
  // add Items to list when add is clicked
  document.getElementById("submit").addEventListener("click", function(e) {
    //get input

    if (document.getElementById("input").value) {
      let userInput = document.getElementById("input").value;
      
      //clear input text
      document.getElementById("input").value = "";
      
      
      
      //create new item
      let newElement = document.createElement("div");
      newElement.classList.add("item");
      newElement.innerHTML = `<p> ${userInput} </p><i class="fas fa-times delete"> </i>`;

      //add item to DOM
      let itemSection = document.getElementsByClassName("app-items");
      itemSection[0].appendChild(newElement);
    }
  });
  
  //delete Items when x is pressed
  let lists = document.querySelector(".delete");
    
  for (let i = 0; i < lists.length; i++ ){
    lists[i].addEventListener("click",function(e){
      console.log(e.target);
    });
  }
      
  
  
  
})();


Was This Post Helpful? 0
  • +
  • -

#3 Fo4ty5`   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 05-June 13

Re: Javascript help

Posted 25 August 2019 - 02:37 PM

Ok I figured it out, it all works now. I am sure it can be optimized to work a lot better with less code. here is the JS code now, this link to the codepen still works as well. If you do happen to look at it and can see any optimization please let me know I am always trying to learn more!
(function() {
  // add Items to list when add is clicked
  document.getElementById("submit").addEventListener("click", function(e) {
    //get input

    if (document.getElementById("input").value) {
      let userInput = document.getElementById("input").value;
      
      //clear input text
      document.getElementById("input").value = "";
      
      
      
      //create new item
      let newElement = document.createElement("div");
      newElement.classList.add("item");
      newElement.innerHTML = `<p> ${userInput} </p><i class="fas fa-times delete"> </i>`;

      //add item to DOM
      let itemSection = document.getElementsByClassName("app-items");
      itemSection[0].appendChild(newElement);
      addEventDelete();
    }
  });
  
  //delete Items when x is pressed
  let lists = document.querySelectorAll(".delete");
 
    
  for (let i = 0; i < lists.length; i++ ){
    lists[i].addEventListener("click",function(e){
      // console.log(e.target.parentElement);
      e.target.parentElement.remove();
    });
  }
      
 function addEventDelete(){
   let lists = document.querySelectorAll(".delete");
 
    
  for (let i = 0; i < lists.length; i++ ){
    lists[i].addEventListener("click",function(e){
      // console.log(e.target.parentElement);
      e.target.parentElement.remove();
    });
  }
      
 }
  
  
})();

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1