使用javascript打开链接上的弹出窗口[关闭]答案

【问题标题】：Open a pop-up on a link using javascript [closed]使用javascript打开链接上的弹出窗口[关闭]
【发布时间】：2020-04-02 18:03:41
【问题描述】：

这对你们很多人来说一定很简单，但我才刚刚开始学习 javascript，并尝试了很多教程，但都没有奏效。

我正在使用 Wordpress 构建一个网站，并且无法在菜单链接上本地添加 javascript，所以我添加了一个类来识别链接并在外部添加一个函数，我最后一次尝试是以下代码：

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

并尝试使用以下脚本添加 javascript：

        <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>

我对 Wordpress 解决方案不感兴趣，但要让 javascript 正常工作，请尽可能详细说明我在哪里出错（可能是所有错误）。

谢谢你:)

【问题讨论】：

尝试：radioPlayer[0].addEventListener("click", abrirPlayer);。更多信息：Using addEventListener and getElementsByClassName。另外，getElementByClassName 有错字。
另外document.getElementByClassName("radioPlayerLink"); 是一个错字。 document.getElementsByClassName("radioPlayerLink"); 是正确的。最好使用document.querySelectorAll(".radioPlayerLink")

标签： javascript

【解决方案1】：

return false 后的"); 不应该在那里

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

它使 javascript 语法不正确。

它的document.getElementsByClassName() 带有s。 getElementById() 没有这个 s 因为它只有一个元素。然后你必须得到数组[0]的第一个元素。

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

除此之外，我想你还想写“听to收音机播放器”:)

测试它是否工作here

【讨论】：

非常感谢:)

【解决方案2】：

getElementsByClassName() 返回一个节点元素数组，即使只存在一个。注意到 getElementsByClassName 中的“s”了吗？ :)

那么你有很多选择：

// 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();

【讨论】：

谢谢你的提示，真的很有用:)

【解决方案3】：

在 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;
        }

&lt;a class="radioPlayerLink" href="#"&gt;Listen do the radio player&lt;/a&gt;

【讨论】：

非常感谢:)