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

What is the best way to incorporate multiple countdown timers on a single HTML page?

Having trouble with JavaScript not working when clicking an image and toggling a div?

Deploying a single node.js app on two separate servers and running them simultaneously

What could be the reason for the onmessage listener not handling the initial SSE event?

Conceal picture when clicked

Navigate down to the bottom of the element located on the webpage

Trigger a function upon the addition of a class to a div element | Execute AnimatedNumber()

Would you like to learn how to display the value of a different component in this specific Angular 2 code and beyond

Incorporating list view separators using JQuery Mobile

Handling Errors in Node.js with Express

What is the best way to implement a delay in axios requests within a loop array?

Is it possible to center content with Bootstrap?

What is the process of converting an Array that is nested within an Object?

Activate a side navigation bar in AdminLTE-3

Display one div and conceal all others

How can you turn off CSS3 animations for browsers that don't support them

What is the best way to transfer information to a different component using Vue router?

What is the best way to convert a 2D PHP array into a JavaScript array?

Tips for preventing the use of eval when invoking various functions

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance