Jira button not triggering JS

[Kathleen Jacobs]

Created a button, that when pressed, will change the CSS of the page.

I had this working with a drop down list but wanted it to be a button so moved everything in my .js file to the .vm file and included a button.

Now it's not working.  JS is not being called when button is pressed. Wondering what i'm missing:

VM file:

#disable_html_escaping()
        <li id="test-menu">
            <button class="aui-button aui-button-primary" href="javascript&colon;changeCSS">Compress</button>
        </li>


<script language="JavaScript" type="text/javascript">

        function changeCSS () {
            if(document.getElementById("ghx-board-name").textContent == 'test') {
                $(this).toggleClass('btn_yellow');

                $("span.ghx-extra-field.ghx-fa").css("margin-left", "30px");

                $(".ghx-issue .ghx-extra-fields").css("margin-top", "5px");
                $(".ghx-issue .ghx-extra-fields").css("display", "flex");

                $(".ghx-issue .ghx-flags").css("left", "20px");
                $(".ghx-issue .ghx-flags").css("top", "5px");

                $(".ghx-issue .ghx-highlighted-fields").css("margin-top", "5px");

                $(".ghx-issue .ghx-type").css("left", "5px");
                $(".ghx-issue .ghx-type").css("top", "5px");

                $(".ghx-issue-content").css("font-size", "12px");
                $(".ghx-issue-content").css("margin-top", "3px");
                $(".ghx-issue-content").css("padding", "5px");
                $(".ghx-issue-content").css("display", "flex");
                $(".ghx-issue-content").css("margin-bottom", "-30px");

                $(".ghx-issue-fields .ghx-key ").css("margin-left", "30px");

                return false;
            }
        });
</script>

XML file web-panel:

<web-panel key="ChangeCSS" location="com.atlassian.jira.plugin.headernav.right.context" weight="1">
<resource type="velocity" name="view" location="/js/menu.vm"/>
</web-panel>

[Aleksandr Zuevich]

Hi,

Button doesn't have href attribute. Use onclick event instead. Change your button to:

<button class="aui-button aui-button-primary" onclick="changeCSS()" resolved="">Compress</button>

[Kathleen Jacobs]

Still doesn't seem to be working. 

this is my entire xml file: 

<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2">
    <plugin-info>
        <description>${project.description}</description>
        <version>${project.version}</version>
        <vendor name="${project.organization.name}" url="${project.organization.url}" />
        <param name="plugin-icon">images/pluginIcon.png</param>
        <param name="plugin-logo">images/pluginLogo.png</param>
    </plugin-info>

    <!-- add our i18n resource -->
    <resource type="i18n" name="i18n" location="menu"/>
    
    <!-- add our web resources -->
    <web-resource key="menu-resources" name="menu Web Resources">
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        
        <resource type="download" name="menu.css" location="/css/menu.css"/>
        <resource type="download" name="menu.js" location="/js/menu.js"/>
        <resource type="download" name="images/" location="/images"/>

        <context>menu</context>
        <context>jira.general</context>
    </web-resource>

    <web-panel key="ChangeCSS" location="com.atlassian.jira.plugin.headernav.right.context" weight="1">
        <resource type="velocity" name="view" location="/js/menu.vm"/>
    </web-panel>

</atlassian-plugin>