Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Adding and Removing Names Removing Names

Posted by Uche Onuekwusi
Uche Onuekwusi
18,070 Points

My code is saying Form submission canceled because the form is not connected

here is my code let form = document.getElementById("registrar");

form.addEventListener("submit",(e)=>{ e.preventDefault(); let parent = document.getElementById("invitedList"); let input = document.getElementById("input"); let li = document.createElement("li") li.textContent = input.value let label = document.createElement("label") label.textContent = "confirmed"; let checkbox = document.createElement("input"); checkbox.type = "checkbox"; let remove = document.createElement("button") remove.textContent = "remove"

label.appendChild(checkbox); li.appendChild(label);; li.appendChild(remove); parent.appendChild(li); input.value="" });

parent.addEventListener("change", (e)=>{ const checkbox = event.target const checked = checkbox.checked; const listitem = checkbox.parentNode.parentNode;

if(checked) { listitem.className = "responded";

}else { listitem.className = ""

}

});

parent.addEventListener("click", (e)=>{ if (e.target.tagName ==="BUTTON"){ const li = e.target.parentNode const ul = li.parentNode ul.removeChild(li); 

}

});
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points

Can you post your html?

Uche Onuekwusi
Uche Onuekwusi
18,070 Points

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>RSVP App</title> <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"> <link href="check.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <header> <h1>RSVP</h1> <p>A Treehouse App</p> <form id="registrar"> <input type="text" name="name" placeholder="Invite Someone" id ="input"> <button type="submit" name="submit" value="submit" id = "butt">Submit</button> </form> </header>

<div class="main">  
  <h2>Invitees</h2>
  <ul id="invitedList"></ul>

</div>

</div>

<script src = "check.js"></script> </body> </html>

1 Answer

Robert Stamate
Robert Stamate
13,227 Points
Robert Stamate
Robert Stamate
13,227 Points

Uche Onuekwusi in your code the flaw might be here:

listitem.className = "" just add a semicolon listitem.className = "";

Due to a syntax error the preventDefault is canceled too and your form just throws an error. You could verify your console too before pressing the submit button or pressing the enter key.

Regards!