Pfff, After trying to debug my code for 2 hours, still can't find it so I am turning to you, my fellow treehousers, help

I think my code is exactly the same as Guil, not sure why it's not working. Everything seems to work till the delete button. Strange... My console said this:? Uncaught TypeError: Cannot set property 'type' of undefined Please can someone reveal for me what I am doing wrong???

// 1: Set the text of the <h1> element const h1 = document.querySelector("h1");

h1.textContent = "I am the Best";

// 2: Set the color of the <h1> to a different color h1.style.color = "red";

// 3: Set the content of the '.desc' paragraph // The content should include at least one HTML tag const p = document.querySelector(".desc");

p.innerHTML = "<i>This will be a list</i>";

// 4: Set the class of the <ul> to 'list'

const ul = document.querySelector("ul"); ul.className = "list";

// 5: Create a new list item and add it to the <ul> const li = document.createElement("li");

li.innerHTML = "<input> Hi i am a list-item";

ul.appendChild(li);

// 6: Change all <input> elements from text fields to checkboxes

const input = document.querySelectorAll("input");

for(let i = 0; i <= input.length; i += 1) { input[i].type = "checkbox"; }

// 7: Create a <button> element, and set its text to 'Delete' // Add the <button> inside the '.extra' <div> const btn = document.createElement("button"); btn.textContent = "delete";

const extra = document.getElementsByClassName("extra"); extra.appendChild(btn);

// 8: Remove the '.extra' <div> element from the DOM when a user clicks the 'Delete' button const container = document.querySelector(".container"); btn.addEventListener(click, () => { container.removeChild(extra); })