mui的switch開關的應用

HTML:   
<!--mui的switch開關-->
            <div class="mui-content-padded">
                <h5>switch開關mui-active開啟狀態</h5>
                <div class="mui-switch mui-active">
                    <div class="mui-switch-handle"></div>
                </div>
            </div>
            
             <div class="mui-content-padded">
                <h5>mui-switch-blue:設置顏色</h5>
                <div class="mui-switch mui-switch-blue">
                    <div class="mui-switch-handle"></div>
                </div>
            </div>
            
            <div class="mui-content-padded">
                <h5>mui-switch-mini:無文字提示開關</h5>
                <div class="mui-switch mui-switch-blue mui-switch-mini">
                    <div class="mui-switch-handle"></div>
                </div>
            </div>
            
             <div class="mui-content-padded">
                <h5>男女性別開關</h5>
                <div class="mui-switch mui-switch-blue" id="gender">
                    <div class="mui-switch-handle"></div>
                    
                </div>
                
                <div class="mui-content-padded">
                    <p class="mui-text-center" id="msg">這里是文字提示</p>
                </div>
            </div>
            <!--點擊按鈕獲取信息-->
            <div class="mui-content-padded">
                <button id="btn-get-gender" class="mui-btn mui-btn-blue">獲取性別</button>
            </div>

JS:
監聽事件函數：
document.getElementById('btn-get-gender').addEventListener('tap',function(){
            //classList.contains('mui-active'):判斷類名是否包含active，如果包含表示處於打開狀態（ture）
                var gender=document.getElementById('gender').classList.contains('mui-active')
                console.log(gender)//ture/false
                
                if(gender==true){
                    document.getElementById("msg").innerHTML='女'
                }else{
                    document.getElementById("msg").innerHTML='男'
                }
            })