JavaScript DOM Scripting By Example Improving the Application Code Refactor 1: Create List Items

Vaidehi S
Vaidehi S
4,278 Points

I am getting error when we append checkbox to label.

The code was working fine before these changes and now am getting this error. What is wrong please help?

app.js:55 Uncaught TypeError: Cannot read property 'appendChild' of undefined at createLi (app.js:55) at HTMLFormElement.<anonymous> (app.js:67)

document.addEventListener('DOMContentLoaded', () => {

const form = document.getElementById('registrar');
const input = form.querySelector('input');

const mainDiv =document.querySelector('.main');
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++) {
        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++) {
          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);
  };

  const li = document.createElement('li');
  appendToLi('span', 'textContent', text)
  appendToLi('label','textContent','Confirmed').appendChild(createElement('input', 'type', 'checkbox'));
  appendToLi('button','textContent', 'edit');
  appendToLi('button', 'textContent','remove');
  return li;
}

// For Submit button
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLi(text)
  ul.appendChild(li);
  form.reset();
});

//for checkbox 
ul.addEventListener('change', (e) => {
 const checkbox = e.target;
 const checked = checkbox.checked;
 const listItem = checkbox.parentNode.parentNode;
  if (checked) {
    listItem.className = 'responded';
  } else {
    listItem.className = '';
  }
});

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

    if (e.target.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;
        const span = document.createElement('span');
        span.textContent = input.value;
        li.insertBefore(span, input);
        li.removeChild(input);
        button.textContent = 'Edit';
       } 
   }
 });

});

2 Answers

Vaidehi S
Vaidehi S
4,278 Points

Thanks. But Guill in his video also doesnt have return then how did it worked for him.