Modify class attributes javascript CSS HTML-CodePudding

I am new to javascript, I tried to change the color of an element (circle) when clicking on a button but it doesn't work for me and i don't know what to do, here is the script: I have 2 files(html and css):

html file:

    <!DOCTYPE html>
    <html>
    <head> <title> www.tothemoon.com</title>
    <link rel="stylesheet"  type="text/css" href="Mpage.css"/>
    
    </head>
    
    <body> 
     <button  id= "but" onclick="FM()"  style="font-size:50px; background-color:blue; border:none">try me </button>
     <div , style="color:#1c87c9"> text </div>
     <script>
     
     var cir=document.querySelector(".circle");
     function FM(){
         cir.style.backgroundColor ="yellow";  
        }
    </script>
    </body>
    </html>

CSS file:

.circle {
background-color: #ccb22e;
width: 200px;
height: 200px;
border-radius: 50%;

}

CodePudding user response：

It works great, it's exactly the code you attached

.circle {
background-color: #ccb22e;
width: 200px;
height: 200px;
border-radius: 50%;
}

    <!DOCTYPE html>
    <html>
    <head> <title> www.tothemoon.com</title>
    <link rel="stylesheet"  type="text/css" href="Mpage.css"/>
    
    </head>
    
    <body> 
     <button  id= "but" onclick="FM()"  style="font-size:50px; background-color:blue; border:none">try me </button>
     <div , style="color:#1c87c9"> text </div>
     <script>
     
     var cir=document.querySelector(".circle");
     function FM(){
        if(cir.style.backgroundColor == "yellow")
            cir.style.backgroundColor  = "#ccb22e";
         else
            cir.style.backgroundColor ="yellow";  
        }
    </script>
    </body>
    </html>