1

Here is my code

const closeBtn = document.querySelector('.current button')

closeBtn.addEventListener('mouseover', e => {
  closeBtn.parentElement.style.display='none'
})
<div class="slide current">
            <div class="content">
                <button class="closeBtn">&times;</button>
                <h1>Orchidaceae</h1>
                <p>
                    There are between 22,000 and 26,000 species in 880 genera. They make up between 6–11% of all seed
                    plants. Orchids can be found in almost every country in the world except for Antarctica.
                </p>
            </div>
        </div>

Could you check what's wrong?

I'm trying to click on the click on the close button on the current slide to hide the content, but it's not showing any error and not any clue!!

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
Recommence
  • 75
  • 1
  • 8
  • 2
    Post a [mcve] in your question please – j08691 Sep 21 '20 at 02:27
  • your github profile works fine - I see no close button on that profile – Jaromanda X Sep 21 '20 at 02:27
  • 1
    your close button click handler just `console.log('click')` - what did you expect to happen? – Jaromanda X Sep 21 '20 at 02:29
  • oh, I see the problem `const closeBtn = document.querySelector('.closeBtn');` ... that's adding a click listener to a single close button ... and your code has 6 of them – Jaromanda X Sep 21 '20 at 02:32
  • 1
    also, all your flowers are one on top of the other, and I think the click event isn't going to the right element – Jaromanda X Sep 21 '20 at 02:36
  • I've edited the question now please let me know – Recommence Sep 21 '20 at 02:46
  • 2
    You can use `getElementByClassName` for your `closeBtn` class, then iterate through every element of the class and add your click event listener to all of them. – Alfred Sep 21 '20 at 02:48
  • This should solve your issue https://stackoverflow.com/a/19655662/4910798 – Alfred Sep 21 '20 at 02:52
  • @Alfred still it doesn't solve the problem – Recommence Sep 21 '20 at 03:11
  • 1
    As @JaromandaX mentioned, your flowers are on top of one another, you can debug it by changing your .slide class position from `absolute` to `relative` temporarily in order to test your click listeners – Alfred Sep 21 '20 at 03:13
  • Hi, I moved your code to a snippet so that everybody can run it here. From what I see, the code does what is intended to do. What are you trying to achieve here? – Tasos K. Sep 26 '20 at 09:42

0 Answers0