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 Next Steps

Tobi Farore
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobi Farore
Full Stack JavaScript Techdegree Student 2,911 Points
Posted by Tobi Farore
.a{fill-rule:evenodd;}techdegree
Tobi Farore
Full Stack JavaScript Techdegree Student 2,911 Points

Text box for li element

function createLi (text) {

    function createElement(elementName, property, value) {   
        const element = document.createElement(elementName);
        element[property] = value;
        return element;
    }

    function appendToLi (elementName, property, value) {
        const element = createElement(elementName, property, value);
        li.appendChild(element);
        return element;
    }

    //create list item
    const li = document.createElement('li');
    appendToLi('span', 'textContent', text);
    appendToLi('id', 'textContent', 'Note')
        .appendChild(createElement('input', 'type', 'text'));
    appendToLi('label', 'textContent', 'confirm')
        .appendChild(createElement('input', 'type', 'checkbox'));
    appendToLi('button', 'textContent', 'edit');
    appendToLi('button', 'textContent', 'remove');
    return li;
}

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

    if (checked) {
        listLabel.childNodes[0].textContent = 'confirmed';
        listItem.className = 'responded';
    } else {
        listLabel.childNodes[0].textContent = 'confirm';
        listItem.className = '';
    }
});

Given the createLi function above, after adding the text area to the li element in my creatli function. When event handler checks the checkbox, it updates the element id='Note' to id='confirm'

How do I work around strictly updating the checkbox parent element 'label' not the element id='Note'

1 Answer