Forum Discussion

Hoekstra_VFZ's avatar
4 years ago

How to duplicate subscribe buttons using Vanilla JS

I thought this might be usefull.

This is what I did: Add a script to a component, create an event listener that awaits the full DOM being built, listen for the button id you want to duplicate, replace the button id in your component. By using cloneNode(true) i am duplicating instead of moving DOM nodes.

<#if condition>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
    function duplicateSubscribeLinkToTopicStatus() {
        let subscribeLink = document.getElementById('addThreadUserEmailSubscription');
        let unsubscribeLink = document.getElementById('removeThreadUserEmailSubscription');
        let targetLink = document.getElementById('custombuttonid');
        if (subscribeLink) {
            var newLink = subscribeLink.cloneNode(true);
            newLink.className = "customclass";
            newLink.innerText = "Follow for updates";
        }
        if (unsubscribeLink) {
            var newLink = unsubscribeLink.cloneNode(true);
            newLink.className = "customclass";
            newLink.innerText = "Unfollow for updates";
        }
        if (targetLink) {
            targetLink.replaceWith(newLink);
        }
    }
    duplicateSubscribeLinkToTopicStatus()
});
</script>
</#if>

 

No RepliesBe the first to reply