Javascript添加一行代碼崩潰

Question

好的，這是我的javascript。 當我添加變量angle1到我的JavaScript它崩潰了整個JavaScript。 basicy我想要的是，jhin的圖像會旋轉鼠標懸停。當鼠標離開時，它會旋轉回原來的位置。 （不可見）

$(document).ready(function(){ 
$("#flip").click(function(){ 
$("#panel").slideToggle("slow") 
}); 

var angle = 0, img = document.getElementById('flip'); 
    document.getElementById('flip').onclick = function() { 
    angle = (angle+180)%360; 
    img.className = "rotate"+angle; 
} 

setTimeout(function(){ 
    document.body.className=""; 
},900); 


var angle1 = 90 document.getElementById('jhin'); 
    docmument.getElementById('jhin').onclick = function() { 
    angle1 = (angle1+90)%180; 
    img.className = "rotate"+angle1; 
    } 

    }); 

function jhinIn(){ 
    document.getElementById("jhin").style.visibility = "visible"; 
} 

function jhinOff(){ 
    document.getElementById("jhin").style.visibility = "hidden"; 
} 

CSS：

#container { 
    width: 1000px; 
    height: 1000px; 
    background-color: #700000; 
    margin: auto; 
    position: relative; 
} 

#mondriaan1 { 
    position: absolute; 
    height: 100px; 
    width: 990px; 
    background-color: #FFFFFF; 
    bottom: 0px; 
    left: 0px; 
    border-color: black; 
    border-width: 5px; 
    border-style: solid; 
} 

#mondriaan2 { 
    position: absolute; 
    height: 800px; 
    width: 100px; 
    background-color: #FFFFFF; 
    left: 0px; 
    bottom: 105px; 
    border-color: black; 
    border-width: 5px; 
    border-style: solid; 
} 

#mondriaan3 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid; 
    background-color: #FFFFFF; 
    top: 0px; 
    left: 0px; 
    width: 400px; 
    height: 85px; 
    position: absolute; 
} 

#mondriaan4 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid;  
    background-color: #FFFFFF; 
    position: absolute; 
    top: 90px; 
    left: 105px; 
    width: 400px; 
    height: 600px; 
} 

#mondriaan5 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid; 
    background-color: #FFFFFF; 
    position: absolute; 
    bottom: 105px; 
    left: 105px; 
    width: 350px; 
    height: 191px; 
} 

#mondriaan6 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid;  
    background-color: #FFFFFF; 
    position: absolute; 
    bottom: 105px; 
    left: 460px; 
    width: 401px; 
    height: 100px; 
} 

#mondriaan7 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid;  
    background-color: #FFFFFF; 
    position: absolute; 
    bottom: 210px; 
    left: 460px; 
    width: 250px; 
    height: 84px; 
} 

#mondriaan8 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid;  
    background-color: #FFFFFF; 
    position: absolute; 
    right: 0px; 
    bottom: 105px; 
    width: 126px; 
    height: 400px; 
} 

#mondriaan9 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid;  
    background-color: #FF3333; 
    position: absolute; 
    right: 0px; 
    width: 126px; 
    height: 485px; 
    top: 0px; 
} 

#mondriaan10 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid; 
    background-color: #FFFFFF; 
    position: absolute; 
    right: 131px; 
    width: 145px; 
    height: 350px; 
    bottom: 210px; 
} 

#mondriaan11 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid; 
    background-color: #FFFFFF; 
    position: absolute; 
    right: 281px; 
    width: 199px; 
    height: 400px; 
    bottom: 300px; 
} 

#mondriaan12 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid; 
    background-color: #FFFFFF; 
    position: absolute; 
    right: 281px; 
    width: 199px; 
    height: 195px; 
    top: 90px; 
} 

#mondriaan13 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid; 
    background-color: #FFFFFF; 
    position: absolute; 
    left: 405px; 
    width: 454px; 
    height: 85px; 
    top: 0px; 
} 

#mondriaan14 { 
    border-color: black; 
    border-width: 5px; 
    border-style: solid; 
    background-color: #FFFFFF; 
    position: absolute; 
    right: 131px; 
    width: 145px; 
    height: 335px; 
    top: 90px; 
} 

#panel { 
    height: 598px; 
    width: 396px; 
    top: 0px; 
    left: 0px; 
    background-color: red; 
    border: black; 
    border-width: 3px; 
    border-style: solid; 
    border-color: #black; 
    background-color: #FFFF00; 
    display: none; 
    text-align: center; 
} 

#flip { 
    cursor: pointer; 
    left: 176px; 
    width: 25px; 
    height: 25px; 
    position: absolute; 
} 

#link { 
    color: black; 
    font-weight: bold; 
} 


#flip { 
    animation-name: rotate; 
    animation-duration: 1s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
} 

#flip.rotate180 { 
    animation-name: rotate180; 
    animation-duration: 1s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 

} 


@keyframes rotate180 { 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(180deg);} 
} 

@keyframes rotate { 
    0% {transform: rotate(180deg);} 
    100% {transform: rotate(360deg);} 
} 

body.preload *{ 
animation-duration: 0s !important; 
-webkit-animation-duration: 0s !important; 
transition:background-color 0s, opacity 0s, color 0s, width 0s, height   0s, padding 0s, margin 0s !important;} 

#jhin { 
    width: 199px; 
    height: 400px; 
    visibility: hidden; 
} 

#jhin.rotate90 { 
    animation-name: jhin90; 
    animation-duration: 2s; 
    animation-fill-mode: forwards; 
    animation-timing-function: linear; 
} 

@keyframes jhin90 { 
    0% {transform: rotateY(90deg);} 
    100% {transform: rotateY(180deg);} 
} 

@keyframes jhin180 { 
    0% {transform: rotateY(180deg);} 
    100% {transform: rotateY(90deg);} 
} 

#jhin.rotate180 { 
    animation-name: jhin180; 
    animation-duration: 2s; 
    animation-fill-mode: forwards; 
    animation-timing-function: linear; 
} 

Answer 1

var angle1 = 90 document.getElementById('jhin'); 

應該是

var angle1 = document.getElementById('jhin');