javascript - amxでボタンをクリックしているときに背景色全体を変更する

Question

AMX ページには 2 つのコマンド ボタンがあります。最初のコマンド ボタンをクリックすると、ページ全体の 1 つの背景色を変更したい。2番目のものをクリックすると、他の別の背景色を適用したいと思います。これを行うためにjavascriptを挿入しようとしています。しかし、それは機能していません。どうすればこれを行うことができますか？

<?xml version="1.0" encoding="UTF-8" ?>
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:amx="http://xmlns.oracle.com/adf/mf/amx"
          xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt">
    <amx:panelPage id="pp1">
        <amx:facet name="header">
            <amx:outputText value="Home" id="ot1"/>
        </amx:facet>
         <amx:commandButton text="Red" id="red" styleClass="blue-background">
            <amx:validationBehavior id="abc"/>
        </amx:commandButton>
        <amx:outputText value="Color" id="color"/>        
        <amx:commandButton text="Green" id="green" styleClass="green-background"/>       
    </amx:panelPage>
</amx:view>

上記のコードは、私の AMX ページ コードです。そして、私のJavaScriptコードは、

$(function(){
     $("#red").on("click", function(){
        alert("clicked");        
     });
         $("#green").on("click", function(){
        alert("clicked second....");         
     });
});