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 Editing and Filtering Names Saving Names

Posted by jlampstack
jlampstack
23,932 Points

How would we change the save so that the event handler is on 'submit'

I tried this on my own, but no luck. Can anyone offer a solution?

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Can you share the code you have tried so far?

3 Answers

Jordan Hoover
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jordan Hoover
Python Web Development Techdegree Graduate 59,268 Points
Jordan Hoover
.a{fill-rule:evenodd;}techdegree seal-36
Jordan Hoover
Python Web Development Techdegree Graduate 59,268 Points

So this might not be the most elegant solution, but I simply created another function outside the branch and then added a 'blur' event. Not necessarily what you were looking for, but works similarly. I believe you'd have to add an entire form for it to work on 'submit'.

ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    const button = e.target;
    const li = button.parentNode;
    const ul = li.parentNode;

//new function
  function saveText(){
    const span = document.createElement('span');
    span.textContent = li.querySelector('input').value;
    li.replaceChild(span, li.firstChild);
    button.textContent = 'edit';
  }

    if (button.textContent === 'remove') {
      ul.removeChild(li);
    } else if (button.textContent === 'edit') { 
      const span = li.firstChild;
      const spanText = span.textContent;

      const input = document.createElement('input');
      input.type = 'text';
      li.replaceChild(input, span);
      input.value = spanText;
      button.textContent = 'save';

      //added event listener
      input.addEventListener('blur', (e) => {
        e.preventDefault();
        saveText();
      });
  } else if (button.textContent === 'save') {
    saveText();
  }
 }
});
Doug Hawkinson
seal-mask
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points
Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

I agree with Iain. You are not offering any context.

Rafael Gomes
Rafael Gomes
6,963 Points
Rafael Gomes
Rafael Gomes
6,963 Points

I DID IT!!! Took me quite a bit of effort and research, but I learned a ton!

Basically the challenge that arrises is just hitting 'Enter' on the input field does not trigger a 'submit' event. In order for that to work, we must place the input inside a form while we are editing (and we need to give this form a unique ID).

Another issue that arrises is the save button is not inside the form and it would be difficult to get it there so instead we set the button type to submit and add an attribute of form="formID" to have a click on the save button trigger the form to submit. It is also important that each ID is unique.

// create a variable to use when giving forms unique ID
let uniqueFormIDNum = 0
// listen for form submissions within the ul
ul.addEventListener('submit', (e) => {
    e.preventDefault();
    const form = e.target;
    const button = form.nextElementSibling.nextElementSibling;
    const li = form.parentNode;
    const input = form.firstElementChild;
    const span = document.createElement('span');
    span.textContent = input.value;
    li.insertBefore(span, form);
    li.removeChild(form)
    button.textContent = 'edit';
    button.removeAttribute('type');
    button.removeAttribute('form');

});


ul.addEventListener('click', (e) =>{
    if (e.target.tagName === 'BUTTON') {
        const button = e.target;
        const li = button.parentNode;
        const ul = li.parentNode;
        if (button.textContent === 'remove') {
            ul.removeChild(li);
        } else if (button.textContent === 'edit') {
            e.preventDefault();  // adding this stops the form submitting
            const span = li.firstElementChild;
            // create html form element with unique id
            const form = document.createElement('form');
            uniqueFormIDNum ++
            let uniqueFormID = 'editname' + uniqueFormIDNum.toString();
            form.id = uniqueFormID
            const input = document.createElement('input');
            input.type = 'text';
            input.value = span.textContent;
            li.insertBefore(form, span);
            form.appendChild(input)
            li.removeChild(span)
            button.textContent = 'save';
            // setting type to 'submit' and adding the attribute 'form = "editName"'
            // this allows a click of the save button to trigger a submit of the form
            button.type = 'submit'
            button.setAttribute("form", uniqueFormID)
        }
    }
});