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
Marcos Raj
Courses Plus Student 5,979 PointsCondition is taking place but still getting error
<!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="main.css" rel="stylesheet">
<script src="app.js"></script>
</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>
</body>
</html>
document.addEventListener('DOMContentLoaded', () =>
{
const form = document.getElementById('registrar');
const input = form.querySelector('input');
const ul = document.getElementById('invitedList');
const divMain = document.querySelector('.main');
const div = document.createElement('div');
const filterLabel = document.createElement('label');
const filterCheckbox = document.createElement('input');
filterLabel.textContent = 'Hide those who have not responded';
filterCheckbox.type = 'checkbox';
div.appendChild(filterLabel);
div.appendChild(filterCheckbox);
divMain.insertBefore(div, ul);
function createLI(text){
function createElement(elementName, property, value)
{
const element = document.createElement(elementName);
element[property] = value;
return element;
}
function appenedToLi(elementName, property, value)
{
const element = createElement(elementName, property, value);
li.appendChild(element);
return element;
}
const li = document.createElement('li');
appenedToLi('span', 'textContent', text);
const label = appenedToLi('label', 'textContent', 'Confirmed');
const checkbox = createElement('input', 'type', 'checkbox');
label.appendChild(checkbox);
appenedToLi('button', 'textContent', 'edit');
appenedToLi('button', 'textContent', 'remove');
return li;
}
form.addEventListener('submit' , (e) =>
{
e.preventDefault();
const text = input.value;
const li = createLI(text);
ul.appendChild(li);
input.value='';
});
ul.addEventListener('click', (e) =>
{
const checkbox = event.target;
const checked = checkbox.checked;
const listItem = checkbox.parentNode.parentNode;
if(checked)
{
listItem.className = 'responded';
}
else
{
listItem.className = '';
}
});
filterCheckbox.addEventListener('change', (e) =>
{
const isChecked = e.target.checked;
const lis = ul.children;
if(isChecked)
{
for(let i = 0; lis.length; i += 1)
{
let li = lis[i];
if(li.className === 'responded')
/*Uncaught TypeError: Cannot read property 'className' of undefined at
HTMLInputElement.filterCheckbox.addEventListener */
{
li.style.display = '';
}
else
{
li.style.display = 'none';
}
}
}
else
{
for(let i = 0; lis.length; i += 1)
{
let li = lis[i];
li.style.display = '';
}
}
});
ul.addEventListener('click', (e) =>
{
if(e.target.tagName === 'BUTTON')
{
const li = e.target.parentNode;
const ul = li.parentNode;
const action = e.target.textContent;
const funcArray =
{
remove: () =>
{
ul.removeChild(li);
},
edit: () =>
{
const span = li.firstElementChild;
const input = document.createElement('input');
input.type = 'text';
input.value = span.textContent;
li.insertBefore(input, span);
li.removeChild(span);
e.target.textContent = 'save';
},
save: () =>
{
const input = li.firstElementChild;
const span = document.createElement('span');
span.textContent = input.value;
li.insertBefore(span, input);
li.removeChild(input);
e.target.textContent = 'edit';
}
}
funcArray[action]();
}
});
});
ERROR: Uncaught TypeError: Cannot read property 'className' of undefined at HTMLInputElement.filterCheckbox.addEventListener.
But my condition is working properly. Please check and share the reason on the comments. Thanks in Advance!
1 Answer
Shane Oliver
19,977 PointsYou are referencing ul out of scope. Console log the variable lis before you loop it, it will be undefined. You can fix this by editing this line
const lis = ul.children;