How to capture all elements with the same class at once?

Asked

Viewed 338 times

-2

I’m taking Javascript course and I’m having a lot of difficulty. I can’t wait to run to jQuery, who I haven’t even studied yet, but I can handle a thousand times better.

My problem is getting all . classes to obey the function, not just the first or a specific one ( [x] ). I tried with all the dials, including the querySelectorAll, but it did not happen.

In this exercise I want all span.btn show the div#win hidden when clicked.

Take the opportunity to ask: could I stop and go study jQuery instead of JS itself? Or is it important to continue?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trying...</title>
    <style>
        body {
            font: normal 10pt Arial;
            margin: 0;
            background: #dbdbdb;
        }
        .track {
            padding: 5px;
            border-bottom: 1px solid #bdbdbd;
            font-size: 12pt;
        }
        .track span {
            border: 1px solid #212121;
            padding: 2px;
            float: right;
            border-radius: 5px;
            font-size: 10pt;
            cursor: pointer;
        }
        .track span:hover {
            background: rgba(206, 15, 15, 0.897);
            color: #ffffff;
        }
        #win {
            display: none;
            background: #ffffff;
            width: 200px;
            border-radius: 5px;
            margin: auto;
            text-align: center;
            padding: 10px;
            margin-top: 20px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.384);
        }
        #win div {
            padding: 5px;
            margin: auto;
            margin-top: 5px;
            background: #212121;
            color: #dbdbdb;
            text-transform: uppercase;
            letter-spacing: 2px;
            width: 150px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="tracks">
        <div class="track">Track 1<span class="btn">download</span></div>
        <div class="track">Track 2<span class="btn">download</span></div>
        <div class="track">Track 3<span class="btn">download</span></div>
    </div>
    <div id="win">
        to download this track<div><strong>click here</strong></div>
    </div>

    <script>
       var janela = document.querySelector('div#win')
       var botão = document.querySelector('div#tracks').querySelector('span.track')
       botão.addEventListener('click', clicar)

       function clicar() {
            janela.style.display = 'display'
       }
    </script>
</body>
</html>

javascript event-listener
  • 1

    Jquery should be looked at with help and not the solution. Learning javascript vanilla is essential, because if the manufacturer decided to remove Jquery from the market you would be disabled as a programmer.

  • @Augustovasques, Poxa. I will continue, thank you.

1 answer

3


To select all elements with the class .btn, you must use the method querySelectorAll, that returns a NodeList.

But since this method returns a list and not the element itself, you cannot expect the list to have the method addEventListener, which is only available in Elements. Therefore, to add the Listener event in each element returned in the list, you must iterate over the collection by adding the Listener in each element.

Something like that:

const btns = document.querySelectorAll('.btn');

btns.forEach((btn) =>
  btn.addEventListener('click', (event) => {
    console.log(event.currentTarget.textContent);
  })
);
<button class="btn">Botão 1</button>
<button class="btn">Botão 2</button>
<button class="btn">Botão 3</button>

And as a final note:

I can’t wait to run to jQuery [...]

I would question the need for jQuery here. A few years ago, native Javascript Apis for DOM manipulation were very poor. Today, new features have been introduced, in addition to new versions of Ecmascript.

Language is worth studying better pure - library-free - for you to understand how everything really works. :)

Browser other questions tagged javascript event-listener

You are not signed in. Login or sign up in order to post.