单击灯箱上的关闭按钮时，重定向到另一个 url

Question

Here is the thing. I'm working on elementor EA lightbox. So when I click on an image a lightbox with video pops up. So I want it to redirect when the person clicks on the "X" button. We can achieve it with a script by adding an ID to the button and on click redirect to a link, I know. But the problem is with elementor, we can't actually add ID or Class to the close button. This is how the close button looks like.

<button title="Close" type="button" class="mfp-close">×</button>

This is the code I tried. But it is not working with "getElementsByClassName" for some reason. And as I said I even can't add an ID to the button.

<script type="text/javascript">
    document.getElementsByClassName("mfp-close").onclick = function () {
        location.href = "www.google.com";
    };
</script>

Can anyone see how this could work? Any help please?

Answer 1

TRY using querySelector instead of getElementByClassName

document.querySelector(".mfp-close").onclick = function () {
    location.href = "www.google.com";
};

Answer 2

document.getElementsByClassName("mfp-close") return an array

you can try

document.getElementsByClassName("mfp-close")[0]

<script type="text/javascript">
    document.getElementsByClassName("mfp-close")[0].onclick = function () {
        location.href = "www.google.com";
    };
</script>

Answer 3

Change class to ID and then:

<script type="text/javascript">
    $("#mfp-close).click(function () {
    window.location.href = "www.google.com";
    });
</script>