Two addEventListener functions on two distinct elements

Question

I maybe losing my marbles here, but I feel like this is pretty straightforward JavaScript. For some reason, the 1st addEventListener call on the #recipes element is firing the statements in both the 1st and 2nd event handlers, and the 2nd event handler isn't working at all.

var recipes = document.getElementById('recipes');
var close_heart = document.getElementById('close_heart');
var recipes_container = document.getElementById('recipes_container');

recipes.addEventListener('click', function(){
  recipes_container.style.display = 'block';
});

close_heart.addEventListener('click', function(){
  recipes_container.style.display = 'none';
});

<div id="recipes"><a href="#" id="close_heart"><span>Recipes</span></a></div>
  <section id="recipes_container"><a href="#" class="fa fa-gittip"></a>
    <h1>Real Mac &amp; Cheese</h1>
      <ul>
        <li>Rule #1 &ndash; Use only real cheese (no powdered cheese ever!)</li>
        <li>Rule #2 &ndash; Use multiple cheese-type varieties (ex: sharp cheddar, monterey jack, bleu)</li>
        <li>Rule #3 &ndash; Choose an extra protein like bacon to liven it up!</li>
      </ul>
  </section>
</div>

Thank you.

Elliot B. · Accepted Answer · 2017-07-25T04:51:33.103

2

Without your HTML I can only speculate, but I'd be willing to bet that what you're encountering is event bubbling.

#recipes likely encapsulates #close_heart such that a click on #close_heart will bubble up and trigger the click event handler for #recipes as well.

You can use .stopPropagation() to resolve this issue. It will prevent the event from bubbling up the DOM and triggering click event handlers on parent elements.

recipes.addEventListener('click', function(event){
  event.stopPropagation();
  recipes_container.style.display = 'block';
});

close_heart.addEventListener('click', function(event){
  event.stopPropagation();
  recipes_container.style.display = 'none';
});

Here's another StackOverflow question with a helpful explanation of event capturing and event bubbling: What is event bubbling and capturing?

Edit: Now that you've included your HTML, I can see that is indeed an issue.

edited Jul 25 '17 at 04:51

answered Jul 25 '17 at 04:35

Elliot B.

17,060
10
80
101

It's the HTML. I was careless. Should I just delete the question? – Gray Spectrum Jul 25 '17 at 04:36
Sorry to waste anyone's time. – Gray Spectrum Jul 25 '17 at 04:37
1

@GraySpectrum No, it's a very valid question. Event bubbling is a tricky concept to grasp at first -- or even realize even that event bubbling exists. I'd suggest that you update your question with the HTML snippet for `#recipes` and `#close_heart` to make it more complete. – Elliot B. Jul 25 '17 at 04:37

score 0 · Answer 2 · answered Jul 25 '17 at 04:43

0

I simply misplaced an id attribute. The close_heart id should have been placed within the anchor element nested in the section.

answered Jul 25 '17 at 04:43

Gray Spectrum

723
2
7
21

1

You also have an issue with event bubbling. Any `click` on `#close_heart` will also trigger the `click` event handler for `#recipes`. My answer shows you how to resolve the issue. – Elliot B. Jul 25 '17 at 04:44
I see. Because the #close_heart element is nested in the #recipes div, so the click event will bubble up by default and trigger the event on the #recipes div. Thanks for persisting with me on this. I have grappled with that concept before, and this example has made it much clearer. – Gray Spectrum Jul 25 '17 at 04:48

score 0 · Answer 3 · answered Jul 25 '17 at 04:46

Perhaps you are missing to assign a proper id to the elements. Check the following code, it should work for your case too:

<html>
    <head>
        <title> The Title </title>
    </head>
    <body>

        <button id="recipes"> Recipes </button>
        <button id="close_heart"> Close_heart </button>
        <h1 id="recipes_container"> Recipes Container </h1>

        <script>
            var recipes = document.getElementById('recipes');
            var close_heart = document.getElementById('close_heart');
            var recipes_container = 
            document.getElementById('recipes_container');

            recipes.addEventListener('click', function(){
                recipes_container.style.color = "blue";
           });

           close_heart.addEventListener('click', function(){
               recipes_container.style.color = "orange";
           });
        </script>
    </body>
</html>

Thanks Reza. It was that indeed, but there was another issue of event bubbling occurring that Elliot B. was kind enough to point out and explain. — Gray Spectrum, Jul 25 '17 at 04:53

Two addEventListener functions on two distinct elements

3 Answers3