0

Maybe this has been asked before, but I was not able to find it anywhere. I am trying to change the title of the slds button on click through controller. I am trying to get the current title through javascript, but it says undefined. This is what I have so far:

<button class="slds-button slds-button_brand" onclick="{! c.addShow }">Add Show</button>
var filter = (component.find("addShowBtn")).get("v.title");
console.log(filter);

Please advise!

3

You are trying to set title attribute on standard HTML button tag and that there’s no component declared with the id addShowBtn, which is not available and thus you are getting an error.

You should replace the button tag with lightning:button and then using an aura:id, you can achieve what you are trying to do, example below.

Component

<lightning:button aura:id="myBtn" title="Old Title" onclick="{! c.handleClick }" variant="base" label="Base"/>

JS Controller

handleClick : function(component, event, helper) {
    alert(component.find("myBtn").get("v.title")); // alerts text Old Title

    var btn = component.find("myBtn"); // get button component
    btn.set("v.title", "New Title"); // set the title

    alert(component.find("myBtn").get("v.title")); // alerts text New Title
}
1

In order to use the component.find you need to define the aura:id attribute on your button.

<button class="slds-button slds-button_brand" onclick="{! c.addShow }" aura:id="addShowBtn">Add Show</button>

Then on your controller you can do the following

var filter = (component.find("addShowBtn")).getElement();
filter.innerHTML = "Title changed";

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.