gotoURL: Multiple onclick events on same component

Question

I have a component that contains 4 icons/buttons. I need each button to navigate to a specific page in lightning community when clicked. When I add my controller, all of the buttons navigate to the same url. How can I get them to fire to each designated url when clicked?

sample component code:

<button class="slds-button slds-button_icon slds-m-left_xx-large slds-m-bottom_small" onmouseover="{!c.displayPopularTip}" onclick="{!c.gotoURL}">

<button class="slds-button slds-button_icon slds-m-left_xx-large slds-m-bottom_small" onmouseover="{!c.displayDataBasicTip}" onclick="{!c.gotoURL}">

js controller:

({
gotoURL : function (component, event, helper) {
    var urlEvent = $A.get("e.force:navigateToURL");
    urlEvent.setParams({

        "url": "/clientserviceonline2/s/topic/0TO0Q0000008aIdWAI/popular-articles"
    });

    urlEvent.fire();
},
({
gotoURL : function (component, event, helper) {
    var urlEvent = $A.get("e.force:navigateToURL");
    urlEvent.setParams({

        "url": "/clientserviceonline2/s/topic/0TO0Q0000008aIdWAI/data-basics"
    });

    urlEvent.fire();
},

There are a total of 4 buttons/icons but I sampled two here. Regardless of which button I click, they all navigate to whatever the last url entry in the js controller. I need them to each navigate to their own separate url. Thanks.

Answer 1

A function's name must be unique; since you define the same method twice, one definition is overwritten in memory. The easiest fix is to simply add a data parameter to your buttons:

<button ... data-target="popular-articles" onclick="{!c.gotoURL}">

That you can then access in your JavaScript:

({
    gotoURL : function (component, event, helper) {
        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({

            "url": "/clientserviceonline2/s/topic/0TO0Q0000008aIdWAI/"+event.target.dataset.target
        });

        urlEvent.fire();
    }
})