JavaScript: down button working but up isn't, both have identical code-CodePudding

Hey I'm kinda a beginner in JavaScript I need help making the up.onclick functions rotate the circle, I know my code is a bit messy, but I just want the easiest way to make dat up button rotate the circle any help will be appreciated

      <!DOCTYPE HTML>
      <html>
      <head>
      <meta charset="utf-8">
      <title>jkk</title>

     <style type="text/css">
     body{
      background:blue;
       }
     #every{
     height:350px;
     width:350px;
     background:grey;
     border-radius:50%;
      margin-top:100px;
     transform:rotate(0deg);
      position:relative;
      z-index:5;
     }






       #s1{
       padding-left:120px;
       color:blue;
      
      
     transform:rotate(270deg);
       }
    #s2{
     /*color:blue;*/
     text-align:left;
      display:block;
      position:relative;
      top:140px;
      transform:rotate(45deg);
     
     
    transform:rotatex(180deg);

      }
    #s3{

    display:inline-block;
    position:relative;
    top:120px;
    left:290px;

   /*color:blue*/
    }
   #s4{
    text-align:center;
   position:relative;
     top:270px;
    /*color:blue;
   transform:rotate(0deg);*/
     }
    .relative{
    width:80px;
     height:40px;
    background:white;
    position:relative;
    bottom:220px;
    left:270px;
    z-index:3;


    }


   /*#s1, #s2, #s3{/* comment: 
    making every outside of s4
    invisible*/





      </style>
        </head>

       <body>


      <div id="every">
   <div id="s1">slide 1</div>

       <span  id="s2">slide 2 
      </span>

        <span id="s3">slide 3 
        </span>

     <div id="s4">slide 
     4</div>


          </div>

         <input type="button" 
         value="up" id="up" 
        width="60px">
      <input type="button" 
      id="down" value="down">

       <div >

      </div>





        <script>
        var 



    up=document.getElementBy
      Id("up");
     var down= 
     document.getElementById
      ("down");
     var s= 
       document.getElementById
         ("s3");
         var

         circle=document.
   getElementById("every");

This is the place I just get confused, and lost, why is the down.onclick event working but the up.onclick isn't, as u can see below the down.onlick and up.onclick have the similar codes

     down.onclick=function (){
      circle.style.transform = 
    /*circle.style.transform   
       */"rotate(90deg)";

       }

      up.onlick= function(){
      circle.style.transform=
      circle.style.transform  
          "rotate(-90deg)";


           }














      /*newCircleValue;*/
    //circleWithCssStyl
     e=newCircleValue;
         /*var 
     g=circle.style.transform
     ="rotate(90deg)";
    g= g "rotate(90deg)";*/
       /*every.innerHTML=
      every.style.transform;*/
      //var newCircleValue=/* 
      circleWithCssStyle*
      /circle.style.transform 
          "rotate(90deg)";

           </script>


        </body>


        </html>

CodePudding user response：

You spelled "onclick" as "onlick" in the third set of code you showed.

CodePudding user response：

Spelling Mistake in up function! It should be onclick