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 Improving the Application Code Refactor 2: Readable Branching Logic

Posted by Todd Alcock
Todd Alcock
5,516 Points

Refactor 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
Daniel Phillips
26,940 Points

Hi 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]();