Open a pop-up on a link using javascript

Question

this must be simple to a lot of you guys, but I'm only starting learning javascript and tried to follow a lot of tutorials and none worked.

I'm building a site using Wordpress and can't add javascript natively on menu links, so I added a class to identify the link and add a function externally, my last attempt was the following code:

<a class="radioPlayerLink" href="#">Listen do the radio player</a>

And tried to add javascript with the following script:

        <script>
        var radioPlayer = document.getElementByClassName("radioPlayerLink");

        radioPlayer.addEventListener("click", abrirPlayer);

        function abrirPlayer(){
          window.open('https://portalrdx.com.br/player-rdx.html', 'aio_radio_player', 'width=720, height=355'); return false;");
        }
    </script>

I'm not interested in Wordpress solutions, but on to making javascript works, be as explicative as you can to show where I got wrong (probably all of it).

Thank you :)

Try: `radioPlayer[0].addEventListener("click", abrirPlayer);` instead. More info: [Using addEventListener and getElementsByClassName](https://stackoverflow.com/questions/42080365/using-addeventlistener-and-getelementsbyclassname-to-pass-an-element-id). Also, `getElementByClassName` has typo. — palaѕн, Apr 02 '20 at 18:05
Also `document.getElementByClassName("radioPlayerLink");` is a typo. `document.getElementsByClassName("radioPlayerLink");` is correct. Better to use `document.querySelectorAll(".radioPlayerLink")` — Anurag Srivastava, Apr 02 '20 at 18:07

jeprubio · Accepted Answer · 2020-04-02T18:18:00.270

the "); after return false should not be there

function abrirPlayer() {
    window.open('https://portalrdx.com.br/player-rdx.html', 'aio_radio_player', 'width=720, height=355');
    return false;
}

it makes the javascript syntax incorrect.

And its document.getElementsByClassName() with an s. getElementById() doesn't have this s as it gets a single element. Then you have to get the first element of the array [0].

document.getElementsByClassName("radioPlayerLink")[0].addEventListener("click", abrirPlayer);

Apart from that, I suppose you wanted to write 'Listen to the radio player' :)

Test it working here

Thank you very much :) – Willian Theodorovicz Apr 02 '20 at 18:41 — Willian Theodorovicz, Apr 02 '20 at 18:41

score 0 · Answer 2 · answered Apr 02 '20 at 18:10

0

getElementsByClassName() returns an array of node elements, even if only one exists. Noticed the "s" in getElementsByClassName ? :)

You have plenty of choices then:

// This will work only if you found an element by the class you searched for
if (radioPlayer.length === 0) return console.error('No <class> found!');
radioPlayer[0].addEventListener();

answered Apr 02 '20 at 18:10

thank you for the tip, really useful :) – Willian Theodorovicz Apr 02 '20 at 18:43

score 0 · Answer 3 · answered Apr 02 '20 at 18:13

0

check this solution on js fiddle: check here

var radioPlayer = document.getElementsByClassName("radioPlayerLink");

        radioPlayer[0].addEventListener("click", abrirPlayer);

        function abrirPlayer(){
          window.open('https://portalrdx.com.br/player-rdx.html', 'aio_radio_player', 'width=720, height=355'); 
          return false;
        }

<a class="radioPlayerLink" href="#">Listen do the radio player</a>

answered Apr 02 '20 at 18:13

DCR

14,737
12
52
115

Thank you very much :) – Willian Theodorovicz Apr 02 '20 at 18:41

Open a pop-up on a link using javascript

3 Answers3