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

Refactor 2

  document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('registrar');
  const input = form.querySelector('input');

  const mainDiv = document.querySelector('.main');
  //const ul...
  const ul = document.getElementById('invitedList');

  const div = document.createElement('div');
  const filterLabel = document.createElement('label');
  const filterCheckBox = document.createElement('input');

  filterLabel.textContent = "Hide those who haven't responded";
  filterCheckBox.type = 'checkbox';
  div.appendChild(filterLabel);
  div.appendChild(filterCheckBox);
  mainDiv.insertBefore(div, ul);
  filterCheckBox.addEventListener('change', (e) =>{
     const isChecked = e.target.checked;  
     const lis = ul.children;
    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 = '';
        }
    }
  });


  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;
    }
     //const ul = document.getElementById('invitedList');
    const li = document.createElement('li');

    appendToLI('span', 'textContent', text);
    //span.textContent = text;
    //deleted because appendToLI is now taking care of --li.appendChild(span);

    const label = appendToLI('label', 'textContent', 'Confirmed');
    //label.textContent = 'Confirmed'; 
    const checkbox = createElement('input', 'type', 'checkbox');
   // checkbox.type = 'checkbox'; 
    label.appendChild(checkbox);
    //li.appendChild(label);

    appendToLI('button', 'textContent', 'edit');
    //editButton.textContent = 'edit';
    //appendToLI noW takes care of ---li.appendChild(editButton);

    appendToLI('button', 'textContent', 'remove');
    //removeButton.textContent = 'remove';
    //appendToLI Now takes care of ---li.appendChild(removeButton);
    return li;

  }

  form.addEventListener('submit', (e) => {
    e.preventDefault();
   // console.log(input.value);
    const text = input.value;
    input.value = '';
    //const ul moved to top of file so it can be globally accessible.
   const li = createLI(text);
    ul.appendChild(li);
  });

  //true(checked) and false(unchecked)
  ul.addEventListener('change', (e) => {
    //console.log(e.target.checked);
    const checkbox = event.target;
    const checked = checkbox.checked;
    const listItem = checkbox.parentNode.parentNode;

    if (checked) {
       listItem.className = 'responded';
    } else {
       listItem.className = '';
    }
  });

  ul.addEventListener('click', (e) => {
    if (e.target.tagName === 'BUTTON') {
      const button = e.target;
      const li = button.parentNode;
      const ul = li.parentNode;
      const action = button.textContent;
      const nameActions = {
        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'; 
        }
      };

    // select and run action in button's name
        nameActions[action]();
    }
   }); 

Moderator edited: Markdown corrected so that code renders properly in the forums. -jn

Can someone tell me why this is not running in my editor?

Steven Parker
Steven Parker
152,755 Points

This code depends on an HTML component that is not shown here.

https://w.trhou.se/q7pe0ooj91

Here is the link to my snapshot.

2 Answers

Steven Parker
Steven Parker
152,755 Points

Apparently, the outer "addEventListener" function is not closed. The unusual indentation makes it hard to spot (but testing in the workspace revealed the issue quickly).

The code needs one more ending brace and parenthesis:

});

Thank you. I'm semi new to the functionality of the workspace. How can I run a test in it to show errors?

Steven Parker
Steven Parker
152,755 Points

While running the preview, I just opened my browser's development tools.

Since you're already taking the prerequisite course, once you finish you might enjoy the Debugging JavaScript in the Browser workshop.

I will study the workshop you've suggested. Thank you.