onClick事件失效：图片点击旋转90度功能无法多次触发问题

嘿，我一眼就发现你的代码里的问题啦！导致点击后没有旋转效果的核心原因是字符串拼接错误，另外还有初始角度设置重复的小问题，咱们一步步来修正：

问题分析 #

1. 变量未被正确解析：你写的img.style.transform = 'rotate(degrees)'中，degrees是JavaScript变量，但直接放在单引号里会被当成字符串字面量"degrees"，浏览器根本无法识别这个角度值，自然不会有旋转效果。
2. 初始角度重复定义：CSS里已经给图片设置了transform:rotate(57deg)，JS里又初始化degrees = 57，虽然初始显示没问题，但后续旋转逻辑最好统一由JS控制，避免潜在冲突。

修正后的代码 #

<html>
<head>
<script>
var degrees = 57;
window.onload = function() {
  // 页面加载完成后设置初始旋转角度，替代CSS中的设置
  var img = document.getElementById('c-channel');
  img.style.transform = `rotate(${degrees}deg)`;
}
function rotateImage() {
 var img = document.getElementById('c-channel');
 degrees += 90;
 // 使用模板字符串将变量degrees插入到旋转规则中
 img.style.transform = `rotate(${degrees}deg)`;
}
</script>
<style>
#c-channel{
 position: absolute;
 cursor: pointer; /* 这里修正了cursor:move的小问题，点击用pointer更符合交互预期 */
 width:190px;
 height:150px;
 /* 去掉CSS中的transform，统一由JS控制旋转逻辑 */
}
</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>

关键修改点 #

• 字符串拼接修正：使用ES6模板字符串`rotate(${degrees}deg)`（或者传统的'rotate(' + degrees + 'deg)'），让JavaScript变量degrees的值能正确插入到CSS transform规则中。
• 统一角度控制：把初始旋转角度的设置从CSS移到JS的window.onload事件中，这样所有旋转逻辑都由JS管理，避免CSS和JS的样式冲突。
• 交互细节优化：把cursor:move改成cursor:pointer，更符合点击交互的视觉提示。

现在点击图片，每次都会累加90度旋转啦，完美实现你想要的效果！

内容的提问来源于stack exchange，提问作者Sarah Bargfrede