Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kristian Woods
Kristian Woods
23,414 Points

Why do I need to click twice for this button to work?

The 'SEE MORE' button doesn't work until I click it twice, why?

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="new_flip.css">
    <title></title>
</head>

<body>

    <div class="wrapper">

        <div class="flip_container container">
            <div class="side_a item1">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item2">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item3">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item4">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item5">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item6">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item7">
                <h1>MyHeading</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE 5</a>
            </div>
        </div>
    </div>
<script src="target.js"></script>
</body>

</html>

let side_a_collection = document.querySelectorAll('.side_a'); //array
let side_b_collection = document.querySelectorAll('.side_b'); //array
let btns = document.querySelectorAll('.btn'); //array

let headings = document.querySelectorAll('h1');



side_b_collection.forEach((sideb) => {
   sideb.addEventListener('mouseover', () => {
      sideb.style.backgroundColor = 'orange';

   });

     sideb.addEventListener('mouseleave', () => {
      sideb.style.backgroundColor = '';

   });
});

 btns.forEach((btn) => {
    btn.addEventListener('click', (e) => {
        if(e.target.tagName === 'A') {
           let button = e.target;
            button.addEventListener('click', (e) => {
               let parentDiv = e.target.parentElement;
               console.log(e);
               parentDiv.style.opacity = '0';
            });
        }

    }); 
 });

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

The click handler given to the links initially only sets another click handler. Then on the second click, that other handler runs.

It sounds like you really intended to have less complex handlers:

btns.forEach(btn => {
  btn.addEventListener("click", e => {
    if (e.target.tagName === "A") {
      let parentDiv = e.target.parentElement;
      console.log(e);
      parentDiv.style.opacity = "0";
    }
  });
});