JavaScript DOM Scripting By Example Adding and Removing Names Removing Names

James Barshaw
James Barshaw
4,678 Points

no remove button still error fixed but have new errors

Uncaught ReferenceError: text is not defined at app.js:27 (anonymous) @ app.js:27 app.js:25 Uncaught ReferenceError: li is not defined at HTMLFormElement.form.addEventListener (app.js:25)

here is my code const form = document.getElementById('registrar'); const input = form.querySelector('input'); const ul = document.getElementById('invitedList');

function createLI(text) { const li = document.createElement('li') li.textContent = text; const label = document.createElement('label') label.textContent = 'confirmed'; const checkbox = document.createElelment ('input'); checkbox.type = 'checkbox'; label.appendChild(checkbox); li.appendChild(label); const button = document.createElement('button') button.textContent = 'remove'; li.appendChild(button); return li; }

form.addEventListener('submit', (e) =>{ e.preventDefault(); const text = input.value; input.value = '';

ul.appendChild(li); }); const li = createLI(text); ul.addEventListener ('change', (e) => { const checkbox = event.target; const checked = checkbox.checked; const listItem = checkbox.parentNode.parentNode;

if (checked) { listItem.className = 'responded'; } else { listItem.className = ''; } });

ul.addEventListener('click', (e) => { if (e.target.tagName === 'Button') { const li= e.target.parentNode; const ul= li.parentNode; } });

benyoungblood
benyoungblood
6,656 Points

I have formatted your code a little better to make it easier for us to help you. I've also added several semi-colons to the ends of your variable declarations.

const form = document.getElementById('registrar'); 
const input = form.querySelector('input'); 
const ul = document.getElementById('invitedList');

function createLI(text) { 
    const li = document.createElement('li');
    li.textContent = text; 

    const label = document.createElement('label'); 
    label.textContent = 'confirmed'; 

    const checkbox = document.createElelment ('input'); 
    checkbox.type = 'checkbox'; label.appendChild(checkbox); 
    li.appendChild(label); 

    const button = document.createElement('button');
    button.textContent = 'remove'; 
    li.appendChild(button); 

    return li; 
}

form.addEventListener('submit', (e) => { 
    e.preventDefault(); 
    const text = input.value; 
    input.value = '';

    ul.appendChild(li); 
}); 

const li = createLI(text); 

ul.addEventListener ('change', (e) => { 
    const checkbox = event.target;
    const checked = checkbox.checked; 
    const listItem = checkbox.parentNode.parentNode;

    if (checked) { 
        listItem.className = 'responded'; 
    } else { 
        listItem.className = ''; 
    } 
});

ul.addEventListener('click', (e) => { 
    if (e.target.tagName === 'Button') { 
        const li= e.target.parentNode; 
        const ul= li.parentNode; 
    } 
});

1 Answer

Jennifer Nordell
STAFF
Jennifer Nordell
Treehouse Staff

Hi there, James Barshaw ! It seems like you missed a line when following along. Inside your form.addEventListener, you should have another line which calls the createLI function and assigns the returned list item to a variable named li, but because that line is missing, li is undefined.

You wrote:

form.addEventListener('submit', (e) => { 
    e.preventDefault(); 
    const text = input.value; 
    input.value = '';

    ul.appendChild(li); 
}); 

But that should be:

form.addEventListener('submit', (e) => { 
    e.preventDefault(); 
    const text = input.value; 
    input.value = '';
    const li = createLI(text);  // it is this line that defines the local li variable
    ul.appendChild(li); 
}); 

You can see this at 6:16 of the video linked here.

Hope this helps! :sparkles: