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 trialTodd Alcock
5,516 PointsRefactor on very last step
get an error from console saying function not found in addEventListener. Not sure where im going wrong.
const form = document.getElementById('registrar'); const input = document.querySelector('input'); const ul = document.getElementById('invitedList'); const mainDiv = document.querySelector('.main'); const filterDiv = document.createElement('div'); const filterCheckbox = document.createElement('input'); const filterLabel = document.createElement('label'); filterCheckbox.type = 'checkbox'; const div = document.querySelector('.main');
mainDiv.insertBefore(filterDiv, ul); filterDiv.appendChild(filterLabel); filterLabel.textContent = 'Confirmed'; filterDiv.appendChild(filterCheckbox);
filterCheckbox.addEventListener('change', (e) => { const ischecked = e.target.checked; lis = ul.children; console.log(lis); console.log(ischecked);
if (ischecked) { for (let i = 0; i < lis.length; i +=1){ let li = lis[i]; if (li.className === 'responded'){ li.style.display = ''; } else{ li.style.display = 'none'; } } }
else { for (let i = 0; i < lis.length; i +=1){ let li = lis[i]; li.style.display = ''; } }
});
form.addEventListener('submit', (e) => { e.preventDefault();
function createElement(elementName, property, value) {
const element = document.createElement(elementName);
element[property] = value;
return element;
}
function appendLi(elementName, property, value) {
const element = createElement(elementName, property, value);
li.appendChild(element);
return element;
}
const text = input.value;
input.value = '';
const li = document.createElement('li'); li.textContent = '';
const confirm = createElement('input', 'type', 'checkbox');
const label = createElement('label', 'textContent', 'Confirmed');
const remove = createElement('button', 'textContent', 'remove');
const edit = createElement('button', 'textContent', 'edit');
const span = createElement('span', 'textContent', text);
li.appendChild(span);
li.appendChild(label);
label.appendChild(confirm);
appendLi('button', 'textContent','remove'); appendLi('button', 'textContent','edit');
ul.appendChild(li)
});
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 = "notResponded";
}
});
ul.addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON') {
const button = e.target;
const li = e.target.parentNode;
const ul = li.parentNode;
const actionType = button.textContent;
const action = {
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);
button.textContent = 'save'
},
save:() => {
const input = li.firstElementChild;
const span = document.createElement('span');
span.textContent = input.value;
li.insertBefore(span, input);
li.removeChild(input);
button.textContent = 'edit';
}
};
actionType[action]();
/*if (actionType === 'Remove'){
action.remove();
}
else if (actionType === 'Edit'){
action.edit();
}
else if (actionType === 'Save'){
action.save();
} */
}
});
1 Answer
Daniel Phillips
26,940 PointsHi Todd. As you can see, pasting code in here is messy. Try making a Snapshot in your workspace next time and pasting the link to that here instead of the code.
You're getting the error because you mixed up the variable names of action
and actionType
. You might have meant to use action
for the textContent of the button and actionType
for the object.
const actionType = button.textContent;
const action = {
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);
button.textContent = 'save'
},
save:() => {
const input = li.firstElementChild;
const span = document.createElement('span');
span.textContent = input.value;
li.insertBefore(span, input);
li.removeChild(input);
button.textContent = 'edit';
}
};
actionType[action]();