Unity - Button not accessible for click event

Question

Using UI Builder, I created a card that displays a value and has a button that needs to be pressed. In my scene, the order of hierarchy is Canvas > Button > Quad > UI document. The button turns the Quad on and off. It is currently disabled. Right now, I'm concentrating on pressing the UI document button. Here, I'm having some problems. Cant really figure out why.

This is my UXML logic:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <Style src="project://database/Assets/stylesheets/stylesheet.uss?fileID=7433441132597879392&amp;guid=d125947a27bfde547b59765e8fdd13cd&amp;type=3#stylesheet" />
    <ui:VisualElement name="cardOneContainer" style="background-color: rgb(255, 255, 255); height: 600px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; width: 100%;">
        <ui:VisualElement name="headerContainer" class="header-text" style="height: 20%; flex-direction: row; justify-content: space-between; align-items: center; background-color: rgb(45, 85, 255);">
            <ui:Label text="ParameterOne" display-tooltip-when-elided="true" name="headerText" class="value-text" style="height: 100%; width: 100%; color: rgb(255, 235, 235);" />
        </ui:VisualElement>
        <ui:VisualElement name="dataContainer" style="height: 80%;">
            <ui:VisualElement name="valueContainer" style="height: 70%; justify-content: space-around;">
                <ui:VisualElement name="tempContainer" style="height: 30%; flex-direction: row;">
                    <ui:Label text="Temp" display-tooltip-when-elided="true" name="tempHeader" style="height: 100%; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); -unity-text-align: middle-center; font-size: 50px; width: 50%; -unity-font-style: bold;" />
                    <ui:Label text="N/A" display-tooltip-when-elided="true" name="tempValue" style="height: 100%; -unity-text-align: middle-center; font-size: 100px; color: rgb(0, 0, 0); width: 50%; -unity-font-style: bold;" />
                </ui:VisualElement>
                <ui:VisualElement name="capContainer" style="height: 30%; flex-direction: row;">
                    <ui:Label text="Capacity" display-tooltip-when-elided="true" name="capHeader" style="height: 100%; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); -unity-text-align: middle-center; font-size: 50px; width: 50%; -unity-font-style: bold;" />
                    <ui:Label text="N/A" display-tooltip-when-elided="true" name="capValue" style="height: 100%; -unity-text-align: middle-center; font-size: 100px; color: rgb(0, 0, 0); width: 50%; -unity-font-style: bold;" />
                </ui:VisualElement>
            </ui:VisualElement>
            <ui:VisualElement name="buttonContainer" style="height: 30%; justify-content: center; align-items: center;">
                <ui:Button text="ADD" display-tooltip-when-elided="true" name="addMedia" class="add-button" />
            </ui:VisualElement>
        </ui:VisualElement>
        <ui:VisualElement name="bottomContainer" style="width: 100%; height: 100%; position: absolute; opacity: 1;">
            <ui:VisualElement name="scrim" style="flex-grow: 1; background-color: rgba(0, 0, 0, 0.72);" />
            <ui:VisualElement name="bottomSheet" style="position: absolute; width: 100%; height: 50%; bottom: 0; background-color: rgba(255, 255, 255, 255); border-top-left-radius: 20px; border-top-right-radius: 20px;" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

This is the script I have attached to the UI document:

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

public class CardController : MonoBehaviour
{
    private VisualElement _bottomContainer;

    private Button _addButton;

    void Start()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;

        _bottomContainer = root.Q<VisualElement>("bottomContainer");

        _addButton = root.Q<Button>("addMedia");

        _bottomContainer.style.display = DisplayStyle.None;
        
        if(_addButton != null){
        Debug.Log("Button detected!");
        _addButton.RegisterCallback<ClickEvent>(addButtonClicked); 
        }      
    }

    private void addButtonClicked(ClickEvent evt)
    {   
        Debug.Log("Button clicked!");
        _bottomContainer.style.display = DisplayStyle.Flex;
    }

}

I see 'Button detected' log in the console, that means the button is accessed in the script. however, the click is not being triggered for some reason.

Answer 1

Code _addButton.clickable.clicked += () => { /* Your code */ }; works fine.