loading...

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

Collapse
eruizdechavez profile image
Erick Ruiz de Chavez

I took the liberty to modify a little bit your code by adding a couple of BEM classes and a couple of data attributes to make things easier, you can see the working example at codepen.io/eruizdechavez/pen/OJMgPvy.

First, I added the class methods__radio to all radio items, and methods__details to all the hidden divs. Then, I added the data attribute data-method-type to all radios with their respective type (card, PayPal, etc.) and the data attribute data-method-details to all the hidden divs with their respective type as well. Here is how one of them:

<div id="paypal">
  <input data-method-type="paypal" 
         class="methods__radio" 
         type="radio"
         name="method">

  PayPal</br>

  <div data-method-details="paypal" 
      class="methods__details on hide">
    <button>
      Check Out with PayPal
    </button>
  </div>
</div>

Then, I modified the JS code to replace the for loop with a foreach, and using both the new classes and data attributes I was able to target and change styles as needed.

function radioClickHandler (event) {
  document.querySelectorAll('.methods__details')
    .forEach(details => {
      details.classList.add('hide');
    });

  const type = event.target.dataset.methodType;
  document
    .querySelector(`.methods__details[data-method-details="${type}"]`)
    .classList.remove('hide');
}

document.querySelectorAll('.methods__radio')
  .forEach(radio => {
    radio.addEventListener('click', radioClickHandler);
  });
Collapse
sanketnjain5 profile image
Sanket N Jain Author

Hi!!
Thank you for spending your time to solve my question. As I'm new to javascript so can you explain what "const type = event.target.dataset.methodType;" does?

Collapse
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.

Reference: