Assigning the style of the parent element based on the child element

Question

Assigning the style of the parent element based on the child element

Currently, I am attempting to develop a customized dropdown field and here is the code I have come up with:

const list = document.querySelector('.list');
const listItems = list.getElementsByTagName('p');

document.querySelector('#category').onclick = function() {
  // I can display the .list DOM element
  list.style.display = 'block';
}

Array.from(listItems)
  .forEach(function(listItem) {
    listItem.onclick = function() {

      // Struggling to hide the .list DOM element
      list.style.display = 'none';

      // The value of .listItem is being outputted
      console.log(listItem.getAttribute('value'));
    }
  }
);

<div class="dropdown" id="category" name="category">
  <div class="trigger">
    <p class="selected-category">Category</p>
  </div>
  <div class="list">
    <p value="">None</p>
    <p value="1">harum inventore</p>
    <p value="2">dolorem voluptatem</p>
    <p value="3">dolores consectetur</p>
    <p value="4">velit culpa</p>
    <p value="5">beatae nulla</p>
  </div>
</div>

My challenge lies in switching the display attribute of the list from block to none. Despite my efforts, this task seems unachievable even after attempting it from two different segments in the code.

Being relatively new to JavaScript prompts me to seek assistance. I believe I may have missed something crucial or taken an incorrect route, although I tried multiple remedies without success. Therefore, I apologize for any inconvenience caused in advance.

javascript html css

Answer 1

Answer №1

It seems like your code was functioning correctly, but the issue arose because both the parent and child elements had click event listeners attached to them. As a result, you were toggling the visibility of the list repeatedly.

If you're interested in learning more about event bubbling, check out this resource: https://javascript.info/bubbling-and-capturing

const list = document.querySelector('.list');
const listItems = list.getElementsByTagName('p');

// Overlapping event listener 1
document.querySelector('#category').onclick = function() {
  list.style.display = 'block';
}

Array.from(listItems)
  .forEach(function(listItem) {
    // Overlapping event listener 2
    listItem.onclick = function(event) {
      // To prevent the double event issue, stop it from bubbling up
      event.stopImmediatePropagation();
      list.style.display = 'none';
      console.log(listItem.getAttribute('data-value'));
    }
  }
);

<div class="dropdown" id="category" name="category">
  <div class="trigger">
    <p class="selected-category">Category</p>
  </div>
  <div class="list">
    <p data-value="">None</p>
    <p data-value="1">harum inventore</p>
    <p data-value="2">dolorem voluptatem</p>
    <p data-value="3">dolores consectetur</p>
    <p data-value="4">velit culpa</p>
    <p data-value="5">beatae nulla</p>
  </div>
</div>

Answer 2

It seems like your code was functioning correctly, but the issue arose because both the parent and child elements had click event listeners attached to them. As a result, you were toggling the visibility of the list repeatedly.

If you're interested in learning more about event bubbling, check out this resource: https://javascript.info/bubbling-and-capturing

const list = document.querySelector('.list');
const listItems = list.getElementsByTagName('p');

// Overlapping event listener 1
document.querySelector('#category').onclick = function() {
  list.style.display = 'block';
}

Array.from(listItems)
  .forEach(function(listItem) {
    // Overlapping event listener 2
    listItem.onclick = function(event) {
      // To prevent the double event issue, stop it from bubbling up
      event.stopImmediatePropagation();
      list.style.display = 'none';
      console.log(listItem.getAttribute('data-value'));
    }
  }
);

<div class="dropdown" id="category" name="category">
  <div class="trigger">
    <p class="selected-category">Category</p>
  </div>
  <div class="list">
    <p data-value="">None</p>
    <p data-value="1">harum inventore</p>
    <p data-value="2">dolorem voluptatem</p>
    <p data-value="3">dolores consectetur</p>
    <p data-value="4">velit culpa</p>
    <p data-value="5">beatae nulla</p>
  </div>
</div>

Answer 3

Answer №2

Whenever you click on a child element of the parent #category, the event listener attached to the parent element is triggered. To stop the click event from propagating up to the parent, you can use the stopPropagation() method within the child elements' event listener.

Additionally, as noted by @connexo in the comments, <p> elements do not possess a value attribute. It seems like you may be referring to a <ul> element with <li> children instead.

To see an illustration of the above concept in action, review and execute the following Code Snippet:

const list = document.querySelector('.list');
  const listItems = document.querySelectorAll('.list li');

  document.querySelector('#category').onclick = function() {
    list.style.display = 'block';                     // Display the .list DOM element
  }

  Array.from(listItems)
    .forEach(function(listItem) {
      listItem.onclick = function(e) {
          e.stopPropagation(); // Prevents parent's event listener from being executed
        list.style.display = 'none';                  // Hide the .list DOM element
      }
    }
  );

.list {display: none; list-style: none;}

<div class="dropdown" id="category" name="category">
    <div class="trigger">
      <p class="selected-category">Category</p>
    </div>
    <ul class="list">
      <li>None</li>
      <li>harum inventore</li>
      <li>dolorem voluptatem</li>
      <li>dolores consectetur</li>
      <li>velit culpa</li>
      <li>beatae nulla</li>
    </ul>
  </div>

Answer 4

Whenever you click on a child element of the parent #category, the event listener attached to the parent element is triggered. To stop the click event from propagating up to the parent, you can use the stopPropagation() method within the child elements' event listener.

Additionally, as noted by @connexo in the comments, <p> elements do not possess a value attribute. It seems like you may be referring to a <ul> element with <li> children instead.

To see an illustration of the above concept in action, review and execute the following Code Snippet:

const list = document.querySelector('.list');
  const listItems = document.querySelectorAll('.list li');

  document.querySelector('#category').onclick = function() {
    list.style.display = 'block';                     // Display the .list DOM element
  }

  Array.from(listItems)
    .forEach(function(listItem) {
      listItem.onclick = function(e) {
          e.stopPropagation(); // Prevents parent's event listener from being executed
        list.style.display = 'none';                  // Hide the .list DOM element
      }
    }
  );

.list {display: none; list-style: none;}

<div class="dropdown" id="category" name="category">
    <div class="trigger">
      <p class="selected-category">Category</p>
    </div>
    <ul class="list">
      <li>None</li>
      <li>harum inventore</li>
      <li>dolorem voluptatem</li>
      <li>dolores consectetur</li>
      <li>velit culpa</li>
      <li>beatae nulla</li>
    </ul>
  </div>

Assigning the style of the parent element based on the child element

Answer №1

Answer №2

Similar questions

Switch the dropdown selection depending on the checkbox status

Struggling to align a div in the middle using react and tailwindcss

Overruled fashion

Subclass Pseudoclass in JavaFX is a powerful feature that

Learn how to efficiently redirect users without losing any valuable data after they sign up using localStorage

What is the best way to compare an attribute value with a JSON value in JavaScript?

Issue encountered while deploying on vercel: TypeError - Trying to access properties of undefined (specifically 'and')

The unique behavior of nested observables within an Ionic2/Angular2 application

tips for converting a single observable item into an observable list

Load the data from amp-list after triggering an event

AngularJS - Struggling to retrieve value from ng-model in controller

Testing in Jasmine: Verifying if ngModelChange triggers the function or not

What could be the reason for the css problems being caused by my flash banner?

Colorful D3.js heatmap display

The continuous resizing of the window is triggering a loop in flexslider when the resize function is called

Discover the best practices for integrating media queries using Radium within Material UI components

It appears that when importing from a shared package in lerna, the name must include "src" at the end for Typescript or Javascript files

Transferring values from jQuery AJAX to Node.js

unable to retrieve the latest scope value following the completion of the ajax request

The issue of Jquery .click event handler failing to work for class selector specifically in CHROME