I'm trying to hang 2 functions on one click, and getting an error, what am I doing wrong?-CodePudding

So, basically, I'm trying to replace the value for the span, but it throws an error after click

const addListenerToEditButtons = (arr) => {
        const updatedButtons = document.querySelectorAll('.container-buttons__update');
        updatedButtons.forEach((button, index) => {
            button.addEventListener('click', (e) => {
                const targetSpan = e.target.parentElement.parentElement.parentElement.children[3].children[0];
                const targetInput = e.target.parentElement.parentElement.parentElement.children[3].children[1];
                toggleEditMode(targetSpan, targetInput);
                editNote(arr, index, targetSpan, targetInput);
            })
        })
    }
    
    const toggleEditMode = (span, input) => {
        if (input.classList.contains(HIDE_ELEMS)) {
            span.classList.add(HIDE_ELEMS);
            input.classList.remove(HIDE_ELEMS);
            return
        }
        span.classList.remove(HIDE_ELEMS);
        input.classList.add(HIDE_ELEMS);
    }
    
    const editNote = (arr, index, span, input) => {
    
        arr.filter((item, i) => {
            if (i === index && input.value !== '') {
                item.content = input.value;
                return
            }
            toggleEditMode();
        })
        showAllNotes(arr);
    }

I'm getting an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

here is you can test my code: https://codesandbox.io/s/winter-silence-yjxo3?file=/package.json

CodePudding user response：

classList is undefined because you didn't pass the span & input element in the toggleEditMode function. This would solve your error but your application won't work still because you don't wait for the user's input before you execute the toggleEditMode function again. So the user won't even have the time to fill something in.

Waiting for user input is a against the principles of JavaScript in my opinion. A better solution would be to attach an input listener to all input element like this:

const addListenerToEditButtons = (arr) => {
  const updatedButtons = document.querySelectorAll(
    ".container-buttons__update"
  );

  updatedButtons.forEach((button, index) => {
    const targetSpan =
        button.parentElement.parentElement.children[3]
            .children[0];
    const targetInput = button.parentElement.parentElement.children[3]
        .children[1];

    targetInput.addEventListener("input", (evt) => {
      targetSpan.innerText = evt.target.value; // here you set the span to the value of the input. You would probably want to store it somewhere here.
    });

    button.addEventListener("click", (e) => {
      toggleEditMode(targetSpan, targetInput); // here you make the input field visible when the edit button is clicked.
    });
  });

Then in your toggleEditMode function you can also put the existing text in the input field and maybe autoFocus on it. If you only want to save the value when the user clicks the edit button again this would be the place to do it:

const toggleEditMode = (span, input) => {
  if (input.classList.contains(HIDE_ELEMS)) {
    span.classList.add(HIDE_ELEMS);
    input.classList.remove(HIDE_ELEMS);
    input.value = span.innerText;
    input.focus(); // so that the input field can automatically be typed into.
    return;
  }
  span.classList.remove(HIDE_ELEMS);
  input.classList.add(HIDE_ELEMS);
};