In JavaScript DOM is it possible to clone an entire button functionality to another?

Question

I mean is it possible to connect an existing button with a newly created button that will work as the existing button?

Reference site: https://www.ninetypercent.com/products/sleeveless-gather-maxi-dress-c5?color=red

Please paste the below code to the browser console after opening the above link:

let title = document.querySelector(".product-details__name").textContent;
let price;
let oldPrice = document.querySelector(".product-details__old-price");

if (oldPrice) {
    price = oldPrice.nextSibling.textContent.trim();
} else {
    price = document.querySelector(".js-product-price").textContent;
}

let div = document.createElement("div");

let path = document.querySelector("header");
div.innerHTML = `
    
    
        ${title}
        ${price}
    
    
`;

path.appendChild(div);
const sourceElement = document.querySelector(".js-product-details-submit-wrapper button");

const destination = document.querySelector(".button");

const copy = sourceElement.cloneNode(true);
destination.appendChild(copy);

window.addEventListener("scroll", () => {
    const scrollPos = window.scrollY;
    if (scrollPos > 1500) {
        document.getElementById("sticky-nav").style.display = "flex";
    } else {
        document.getElementById("sticky-nav").style.display = "none";
    }
});

I want to connect the sticky-nav button to the existing "Add to Bag" button and the functionality of both button will be the same. The same messaging as in control will appear on the PDP(Product details page) and basket icon quantity will increase. How can I do that?

user_7732282 · Answer

Within the click-handler for the one button you could trigger the other, like so (names are made up of course):

stickyNavBtn.onclick = () => addToBagBtn.click();

user_4437468 · Answer

You can create a function (in JS) and call it from both the original button (addToBagBtn in your case) and newly created button (stickyNavBtn in your case).

Like:-

/*JavaScript*/

function doSomething() {
  alert("Replace with whatever task you like!");
}

var button = document.createElement("button");
button.innerText = "Newly Created Button";
button.onclick = function() {
  doSomething();
}
document.getElementById("container").appendChild(button);

In JavaScript DOM is it possible to clone an entire button functionality to another?

2 Answers