点击圆形时旋转图形功能异常：循环及ReferenceError问题

错误点梳理 #

1. 变量名不匹配：代码里用了未定义的deg，但实际声明的变量是Degree，直接导致ReferenceError异常。
2. 遍历方式错误：for...in遍历getElementsByTagName返回的HTMLCollection时，会包含集合的非元素属性（比如length、item），设置样式时会触发错误，中断循环执行。
3. 角度累加逻辑错误：把角度累加放在循环内部，每遍历一个div就加10度，一次点击会多次累加角度，不符合“每次点击旋转10度”的需求。
4. 未排除触发元素：点击的按钮div也会被旋转，不符合“只旋转其他图形”的预期。

修复后的代码 #

JavaScript 代码 #

let Degree = 0;

function RotateDiv() {
  Degree += 10; // 每次点击整体增加10度，放在循环外
  const divs = document.getElementsByTagName('div');
  
  // 用for...of遍历元素，避开非元素属性
  for (const div of divs) {
    // 排除点击按钮，只旋转目标图形
    if (!div.classList.contains('button')) {
      div.style.transform = `rotate(${Degree}deg)`; // 用transform属性兼容性更好，模板字符串更简洁
    }
  }
}

HTML 代码 #

<div onclick="RotateDiv()" class="button">rotate</div>
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>

补充说明 #

• 使用transform: rotate()替代直接设置style.rotate，兼容性更强，符合CSS标准写法。
• 用let声明Degree替代var，避免变量提升带来的潜在问题。
• 通过classList.contains('button')过滤触发点击的按钮，确保只有目标图形被旋转。

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