Discussion on: cannot read property 'classlist' of undefined javascript

eruizdechavez profile image
Erick Ruiz de Chavez

Hey, no problem!

So, let me break that line as much as I can:

  • const: It is supported by all major browsers today, will throw an error if you try to reassign its value after the initial assignment.
  • event: All event handlers receive an event object that changes based on what event was triggered. In this case, click event sends a MouseEvent.
  • event.target: All events have many properties, two of them are target which is what triggered the event, and currentTarget which is what is listening to the event. In the code I shared, the value of target is the clicked radio because that is what was "clicked", and currentTarget is also the radio because the event handler is attached to it.
  • event.target.dataset: The DOM exposes the dataset property as a way for you to read and write arbitrary data to the custom data-* attributes. In this example, I created two properties: data-method-type and data-method-details to help me target specific elements in the DOM. What you write in the DOM as kebab case data-your-custom-property gets translated inside the dataset property as camel case dataset.yourCustomProperty.
  • event.target.dataset.methodType: in this line, methodType is how you access the value of that data-method-type data attribute.