时间戳

首页 > 解决方案 > onClick 事件无法执行功能

javascript - onClick 事件无法执行功能

问题描述

我的程序中有一张图片，我希望用户每次点击都能旋转 90 度。因为图像会以倾斜的角度自动放置在我的程序中，所以我需要在允许用户这样做之前使用 CSS 来旋转图像。这样，当它被单击时，图像将水平和横向显示。目前，我的 HTML 代码中的 onClick 事件似乎只工作一次。

我试图声明一个变量来增加每次点击时的旋转值，但这样做完全消除了旋转

<html>
   <head>
   <script>
     var degrees = 57;
     function rotateImage() {
       var img = document.getElementById('c-channel');
       degrees += 90;
       img.style.transform = 'rotate(degrees)';  
 }
 </script>

 <style>
    #c-channel{
      position: absolute;
      cursor:move;
      width:190px;
      height:150px;
      transform:rotate(57deg);
   }
   </style>
   </head>

 <body>
   <img id="c-channel" src="https://cdn.glitch.com/2a39b17c-6b95-46ec9d5c-cf9db18cd879%2Foutput-onlinepngtools%20(6).png?v=1564485433523" onclick="rotateImage()"> 
 </body>
</html>

我希望该程序允许用户在每次单击时将图像再旋转 90 度，但是单击图像并没有提供任何可见的变化。

标签： javascripthtmlcss

解决方案

您没有使用degrees变量，您可以使用字符串模板，如下所示：

var degrees = 57;

function rotateImage() {
  var img = document.getElementById('c-channel');
  degrees = (degrees % 360) + 90;
  //img.style.transform = 'rotate(' + degrees + 'deg)';
  img.style.transform = `rotate(${degrees}deg)`;
}
#c-channel {
  position: absolute;
  cursor: move;
  width: 190px;
  height: 150px;
  transform: rotate(57deg);
  border: grey;
}
<img id="c-channel" onclick="rotateImage()">

推荐阅读