Pass on HTML element attribute to another element attribute

Question

I'm using Elementor Pro for website development. I created a standard popup that is triggered if the user clicks on a link on the page like this

<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink1.com”>test link</a>
<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink2.com”>test link</a>
<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink3.com”>test link</a>
<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink4.com”>test link</a>

The popup (on the same page) has a button that will forward the user to the external link previously clicked:

<a href="https://www.test.com" class="elementor-button-link elementor-button" id="extlinkurl" role="button">Take me to the link</a>

Elementor offers no option to dynamically set the href value of the button based on the custom attribute (in this case “ext-link”), but I found no other option to dynamically set the href attribute of this button. Is there an easy JavaScript /jQuery escape here (no plugin!) that can be used to pass on the custom attribute value to the button link attribute?

• EDIT -

I did some tryouts to fund a solution for this problem and I came up with the following:

<script>
    // Append an onclick event to each link
    let extLinkItems = document.querySelectorAll('[data-extlinkurl]');
    extLinkItems.forEach((extLinkItem) => {
        extLinkItem.setAttribute("onclick", "getUrl()");
    });

The onclick event is added properly to each link here.

Because the function setLink (see below) did not work, I added some checks here:

console.log("Button count=" + document.querySelectorAll('#extlinkbtn').length); // Button count=1
console.log("Button href=" +  document.getElementById("extlinkbtn").href); // Button href=http://www.test.com/
console.log("Button href=" +  document.getElementById("extlinkbtn").getAttribute("href")); // Button href=http://www.test.com

These provided the expected results. The button is found and the href attribute is available.

function getUrl() { 
    var newUrl = event.currentTarget.getAttribute('data-extlinkurl');
    console.log("newUrl=" + newUrl); // newUrl=https://www.mylink1.com
    setUrl(newUrl);
}

Also works properly. When the link is clicked, the data attribute of the link is available.

    function setUrl(newLink) {
        let linkButtons = document.querySelectorAll('#extlinkbtn');
        console.log("count=" + linkButtons.length) // count=0
        linkButtons.forEach((linkButton) => {
            linkButton.setAttribute("href", "'" + newLinkUrl + "'");
        });
    }   
</script>

Here it becomes problematic. Once the link is clicked, the button cannot be found. The button is there, because the popup with the button is displayed on screen and the element visible. I'm testing several days now and either solution I tried did not work. Why is the button element found if searched on a global scope, but after the link is clicked the button is not available in the function scope?

Answer 1

Eventually and not thanks to the Elementor second line support, I found a solution. It seems that the content of the popup was initially loaded but deleted by a function after the DOM was loaded. The solution was here: https://developers.elementor.com/elementor-pro-2-7-popup-events/

What I did was adding a custom data attribute to the link button that is clicked in the popup screen after this is loaded which holds the target URL. After this, I added some JS/jQuery to the popup template:

<script>
let newLinkUrl = "";
let extLinkItems = document.querySelectorAll('[data-extlinkurl]');
extLinkItems.forEach((extLinkItem) => {
  extLinkItem.setAttribute("onclick", "getUrl()");
});

function getUrl() { 
    newLinkUrl = event.currentTarget.getAttribute('data-extlinkurl');
    jQuery( document ).on( 'elementor/popup/show', () => {
        document.getElementById('extlinkbtn').href=newLinkUrl;
    });
}
</script>

This works perfectly