Dom Manipulation

Question

Hi Friends,
I am working on the RSVP Dom Scripting course.   I am hung up and handling the events when a user edits a name. After the 'save' button is clicked the entire element is removed. If I inspect the element in Chrome Dev tools I can see the correct value is there but it is not showing up on the page. 
Below is a snapshot of my workspace. 
https://w.trhou.se/ww6zlotk7n
javascript
ul.addEventListener('click', (e) => {
    if (e.target.tagName === 'BUTTON'){
        const li = e.target.parentNode;
        const ul = li.parentNode;
        const button = e.target;
        if (button.textContent === 'remove'){
            ul.removeChild(li);
        }else if (button.textContent === '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';
        }else if ( button.textContent === 'save'){
            const input = li.firstElementChild;
            console.log(input.value);
            const span = document.createElement('input');
            span.textContent = input.value;
            li.insertBefore(span, input);
            li.removeChild(input);
            button.textContent = 'save';
        }
    }
})

Fernando Boza · Accepted Answer

Hey @Brooks Johnson (https://teamtreehouse.com/brooksjohnson) if you look at line 88, your span aka input doesn't have a property of textContent, thats only for h2, spans, p, etc, for <input> you want to use value
```javascript
span.value = input.value;
//instead of
span.textContent = input.value;
```

Welcome to the Treehouse Community

Looking to learn something new?

Brooks Johnson

Brooks Johnson

Dom Manipulation

1 Answer

Fernando Boza

Fernando Boza

Brooks Johnson

Brooks Johnson

Fernando Boza

Fernando Boza