JavaScript DOM Scripting By Example Improving the Application Code Refactor 2: Readable Branching Logic

Todd Alcock
Todd Alcock
5,182 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
11,321 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]();