Javascript Event's. .. please any help

JavaScript
1 
var list= document.createElement("li");
     var button= document.createElement("button");
      
      
      
      button.innerHTML="Remove";
      list.innerHTML="Javascript";
      ul.appendChild(list);
      
      button.classList.add("btn");
      
     
      
      addButton.onclick= function() {
      list.insertAdjacentElement("beforeend",button);
      }
      
      
      var gButtons= document.querySelector(".btn");
  //    for(var i=0; gButtons.length; i++) {
          gButtons.onclick= function(e) {
                 e.target.parentNode.remove();
          }

The gButtons event is not working I don’t know why

2

Hey! Instead of adding a code snippet can you please add a link to your codepen so its easier for others to debug youre code. Thanks in advance :grinning_face_with_smiling_eyes:

3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

4

Where are you getting ul from? You are calling appendChild on it but I do not see a selector for that element.

Same with addButton. You are adding an onclick function to it but I do not see it declared anywhere in the code.

In which case, both will cause an error before your querySelector code.

5 
<!DOCTYPE html>
<html>
<head>
   <title>js </title>
   <style type="text/css">
      .btn {
        background: rgba(89, 156, 78, 0.6);
      }
   </style>
</head>
<body>
   <input type="text" id="input"/>
   <button id="add">ADD </button>
   <ul class="hour"></ul>
   
   <script>
      var addButton= document.querySelector("#add");
      var ul= document.querySelector(".hour");
      var text= document.querySelector("#input");
      
      
      
      

      
     // function createOut(input) {
        
     var list= document.createElement("li");
     var button= document.createElement("button");
      
      
      
      button.innerHTML="Remove";
      list.innerHTML="Javascript";
      ul.appendChild(list);
      
      button.classList.add("btn");
      
     
      
      addButton.onclick= function() {
      list.insertAdjacentElemeny("beforeend",button);
      }
      
      
      var gButtons= document.querySelector(".btn");
  //    for(var i=0; gButtons.length; i++) {
          gButtons.onclick= function(e) {
                 e.target.parentNode.remove();
          }
      
   </script>
</body>
</html>

Here is the code

6

You create the button element and set the text but you never actually add the button element you created to the DOM. So you can’t query for it.

You have a typo as well insertAdjacentElemeny.

Edit: You pretty much want most of your code to be inside the onclick handler.

Inside the handler:

  1. Create the li set its text to the input element value. Append it to the ul.

  2. Create the button, set its class and text, then add the event listener to it. Insert it to the list.

Example 
const addButton = document.querySelector("#add");
const ul = document.querySelector(".hour");
const text = document.querySelector("#input");

addButton.onclick = function () {
  const list = document.createElement("li");
  // get the value from the input element
  list.innerHTML = text.value;
  ul.appendChild(list);
  
  const button = document.createElement("button");
  button.classList.add("btn");
  button.innerHTML = "Remove";
  
  button.onclick = function (e) {
    e.target.parentNode.remove();
  };

  list.insertAdjacentElement("beforeend", button);
};
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.