Uncaught Typeerror: Cannot read Property 'split' of Undefined - Javascript

Question

I was following a project in a tutorial and I bumped into this problem, as you know in tutorials not explain the mistakes of things so I came here, I’m still learning.

addEventListenerAll(element, events, fn){

    events.split(' ').forEach(event => { //ERRO

        element.addEventListener(event, fn, false)
    })
}


initButtonsEvents(){

    let buttons = document.querySelectorAll('#buttons > g, #parts > g')

    buttons.forEach((btn, index)=>{

        this.addEventListenerAll(btn, 'click drag', e => {

            console.log(btn.className.baseVal.replace('btn-', ''))
        })
    })
}

Answer 1

There are several variants of this error spread over the internet, and always refer to the method executed, which in your case is the split.

The message says:

Cannot read Property 'split' of Undefined

That means you’re trying to call split about something that’s undefined, which is basically here:

events.split(' ').forEach(event => {
          ^---- split chamado aqui
  ^------------ events está undefined

The cause of this is the value of the object you are dealing with, which is expected to have content but in your case does not. In short, it was expected that your parameter events had content but it is empty because:

• Or was not passed to the function when called. Ex:

  let element = document.getElementById("exemplo");
  obj.addEventListenerAll(element);
  // ----------------------------^
  // |
  // faltou passar o events como segundo parametro e por isso vai ficar undefined
  // neste exemplo até o terceiro parametro fn vai ficar undefined
  

• Or happened to be that it forgot to put value. Ex:

  let element = document.getElementById("exemplo");
  let events;  // <--- não foi inicializado logo fica undefined
  let fn = () => {};
  obj.addEventListenerAll(element, events, fn);
  

Answer 2

It means that the variable events is empty.

The part of your code pasted above does not seem to bring this error. It may be that your function is being called from elsewhere.

Suggestion:

1. Edit your code by adding the line debugger; before the events.split.
2. Open Veloper Tools (F12) and refresh (F5);
3. Perform the action that runs the code under analysis, the debugger will end up on the line where you put the debugger
4. Assess whether events is empty (swiping the mouse over or typing on the console, to open the console press "Esc" with the cursor focused on dev tools).
5. There will be a "Call Stack" or "Call Stack" section in dev tools. Analyze this section to see where your function was called from. You can browse freely through all the functions in the list and see the values of the variables;
6. If necessary, add new breakpoints (either by adding the "Debugger" text, or by clicking on a line number), then run the code again and repeat the analyses until you get closer to the source of the problem.