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

Posted by benjaminmosery
benjaminmosery
6,346 Points

What is wrong with my code? A name is not registering in the RSVP list.

Here is my code for the Javascript video on Registering Names "DOM Scripting by Example":

const form = document.getElementById('registrar');

const input = form.querySelector('input');

form.addEventListener ('submit',(e) => {

e.preventDefault();

const text = input.value

input.value = '';

const ul = document.getElementById('invitedList');

const li = document.createElement('li');

li.textContent = text;

ul.appendChild(li); });

When I preview the page, no name is registered in the RSVP list. Any ideas?

jeffrey bachynski
jeffrey bachynski
5,179 Points

Do you have the HTML that goes with it? What are you seeing in the console when you try to run the code?

benjaminmosery
benjaminmosery
6,346 Points

Im simply trying to follow the instructions in the Javascript video "DOM Scripting By Example", using the concepts described in said video to create a fully functioning RSVP application. When I run the code stated above, nothing happens. Here is the HTML needed to run the Javascript:

<!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="css/style.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">
    <button type="submit" name="submit" value="submit">Submit</button>
  </form>
</header>

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

</div> <script type = “text/javascript” src = “app.js”> </script> </body> </html>

5 Answers

Tim Strand
Tim Strand
22,458 Points
Tim Strand
Tim Strand
22,458 Points

this code doesnt look right. can you please include a link to the problem you are trying to solve? from the looks of it you grabbed 1 input field with the tagname of input and set text value to that. odds are strong that you have more than 1 input el in a form. try using a class or querySelectorAll to grab all the inputs then loop through the inputs array and create an li for each and set the li.innerText = input.value. The below code should be close to what you need. But takes a big guess in what you were trying to do. The big difference below is turning the querySelectorAll node list into an array and then looping that array to accomplish your task.

const form = document.getElementById('registrar'), 
    input = form.querySelector('input'),
    ul = document.getElementById('invitedList');
form.addEventListener ('submit',(e) => {
    e.preventDefault();
    const li = document.createElement('li');
    li.innerText = input.value;
    input.value = '';
    ul.appendChild(li);
});
benjaminmosery
benjaminmosery
6,346 Points

Tim,

I am following the following video, using the Javascript Code mentioned above as well as the HTML I posted in the comment below it, to make an RSVP application using only the concepts used in the video.

https://teamtreehouse.com/library/dom-scripting-by-example

When I try to run the code, nothing happens. Any suggestions on how to modify either the HTML or Javascript so it runs according to the video?

Thanks for taking the time to reply. Ben

Tim Strand
Tim Strand
22,458 Points

ok, to explicitly fix your code (thanks for the link) you are missing a semi colon after your text variable declaration. The code in my answer works correctly when pasted into the workspace for this video.

benjaminmosery
benjaminmosery
6,346 Points
benjaminmosery
benjaminmosery
6,346 Points

I corrected the semicolon, but the page still doesnt register any names on my end. Could it be something with my browser? Im using Mozilla Firefox, while the instructor is using Chrome.

Tim Strand
Tim Strand
22,458 Points

hit F12 to open your developer tools. what error are you getting in your console? this regurgitation of your code (with the semi colon) works for me in chrome.

const form = document.getElementById('registrar');
const input = form.querySelector('input');
form.addEventListener ('submit',(e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const ul = document.getElementById('invitedList');
  const li = document.createElement('li');
  li.textContent = text;
  ul.appendChild(li); 
});
benjaminmosery
benjaminmosery
6,346 Points
benjaminmosery
benjaminmosery
6,346 Points

Im not getting an error in the console, it just doesnt load a name under "Invitees"

Thanks for the F12 trick though, quite helpful!

Tim Strand
Tim Strand
22,458 Points

i have assumed you are actually typing a name into the box and hitting submit correct?

benjaminmosery
benjaminmosery
6,346 Points
benjaminmosery
benjaminmosery
6,346 Points

Correct! No response from the webpage.

Tim Strand
Tim Strand
22,458 Points

I am sorry, i dont have firefox installed. https://caniuse.com/ says that everything you are using is supported by firefox. I have tried it in IE and Chrome and its working for me in both. I am at the end of my abilities to help you, my apologies.

jeffrey bachynski
jeffrey bachynski
5,179 Points
jeffrey bachynski
jeffrey bachynski
5,179 Points

It looks like your script is not connecting to the html. I think there might be something wrong with the quotes. When I pasted what you had into a text editor your line

<script type = “text/javascript” src = “app.js”> </script>

shows up different than the one that I wrote below

<script type="text/javascript" src="app2.js"></script>

If you notice there is a slight slant on the quotes on the version that you posted. You have used a left quote :U+201C https://unicode-table.com/en/search/?q=++%E2%80%9C

and a right quote U+201D https://unicode-table.com/en/search/?q=%E2%80%9D

when they both should be quotation marks U+0022 https://unicode-table.com/en/0022/

Because of that, the javascript file doesn't load at all. I am not sure how you got those quotes in there, if you typed it in something like Word and then copy and pasted it that would

Please let me know if that fixed your issue. Good luck.