js中的onclick事件点击一次后失效

Question

如下，这是我的js中的两个函数

    function my$(id) {
            return document.getElementById(id);
    }
    function xiala() {
            var xiala = my$("xiala");
            xiala.style.transform = "rotateX(180deg)";//使被选中的元素旋转180deg
    }

下面是html主体

        <img id="xiala" type="button" onclick="xiala()" src="imgs/icons/xiala1.png" />

按理说，点击这张图片，它应该会来回旋转，但是这张图片的点击事件只触发了一次，之后再点击都没有反应，请问这是怎么回事？

下面是我用的图片

Answer 1

没有失效……只是你点击触发的动作是xiala.style.transform = "rotateX(180deg)";而不是每次点击后旋转角度都增加180，所以你这个代码第一次点击后变成xiala.style.transform = "rotateX(180deg)";后面点击也没有改变呀。不信你在点击触发的函数里面加个alert('我被点击了！');

<script>
function my$(id) {
return document.getElementById(id);
}
var xialaR=0;
function xiala() {
var xiala = my$("xiala");
xialaR = (xialaR+180)%360;
//alert("我被点击了！");
xiala.style.transform = "rotateX("+xialaR+"deg)";//使被选中的元素旋转180deg
}
</script>
<img id="xiala" type="button" onclick="xiala()" src="tempsnip.png" />