JavaScript DOM Scripting By Example Editing and Filtering Names States of the Application

Colin Sandlin
Colin Sandlin
4,507 Points

Can't get my edit button to log to console

I haven't modified the html at all from his.

const form = document.getElementById('registrar'); // ID the form so you can attach an eventlistener to it //
const input = form.querySelector('input'); // 
// moved from initial function to here //
var ul = document.getElementById('invitedList');

function createLI(text) {
  var li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = "Confirmed";
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  label.appendChild(checkbox);
  li.appendChild(label);

  // add edit buttons //
  const editButton = document.createElement('button');
  editButton.textContent = 'Edit';
  li.appendChild(editButton);

  // add remove buttons //
  const removeButton = document.createElement('button');
  removeButton.textContent = 'remove';
  li.appendChild(removeButton);
  return li;
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  var text = input.value;
  input.value = '';
  // var ul = document.getElementById('invitedList'); // move to top to move to global scope so it can be accessed for other function //
  const li = createLI(text);
  ul.appendChild(li);
});

// if checkbox is changed, then add a classname with specific CSS properties to that item so it's highlighted //
ul.addEventListener('change', (e) => {
  // console.log(e.target.checked); // checkboxes have value of checked - true or false
  const checkbox = e.target;
  const checked = checkbox.checked;
  const listItem = checkbox.parentNode.parentNode;

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

// remove list item when 'remove' button is pushed //
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') {
      console.log('edit');
    }
  }
});

2 Answers

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 46,026 Points

You have set the textContent here with an uppercase E:

editButton.textContent = 'Edit';

but here you check a lowercase e

else if (button.textContent === 'edit') {
      console.log('edit');

Make them the same case and you should be good

Colin Sandlin
Colin Sandlin
4,507 Points

Thank you! I looked over that code for an hour and couldn't find that mistake.