HTML中定义的Class在JS文件中无法识别，出现ReferenceError错误

问题原因 #

你直接在JS里使用hour、minutes、seconds这些变量，但根本没先从HTML中获取对应的元素。JS不知道这些变量对应页面上的哪个DOM节点，所以抛出Uncaught ReferenceError: hour is not defined错误。

修复步骤 #

1. 先获取DOM元素：通过类选择器找到页面上对应的元素，把它们赋值给变量后再操作
2. 确保DOM加载完成后执行JS：如果JS代码放在<head>里，要等页面元素加载完再执行，否则会获取不到元素

修改后的JS代码示例 #

方法一：使用querySelector（推荐，语法简洁）

// 先获取页面上的元素
const hour = document.querySelector('.hour');
const minutes = document.querySelector('.minutes');
const seconds = document.querySelector('.seconds');

// 执行旋转逻辑
hour.style.transform = `rotate(${hrotation}deg)`;
minutes.style.transform = `rotate(${mrotation}deg)`;
seconds.style.transform = `rotate(${srotation}deg)`;

方法二：使用getElementsByClassName

// 获取元素集合，取第一个匹配的元素（页面中每个class仅存在一个）
const hour = document.getElementsByClassName('hour')[0];
const minutes = document.getElementsByClassName('minutes')[0];
const seconds = document.getElementsByClassName('seconds')[0];

// 执行旋转逻辑
hour.style.transform = `rotate(${hrotation}deg)`;
minutes.style.transform = `rotate(${mrotation}deg)`;
seconds.style.transform = `rotate(${srotation}deg)`;

确保DOM加载完成的处理

如果你的JS脚本放在<head>标签内，需要用DOMContentLoaded事件包裹代码，避免DOM未加载完成就执行：

document.addEventListener('DOMContentLoaded', function() {
  const hour = document.querySelector('.hour');
  const minutes = document.querySelector('.minutes');
  const seconds = document.querySelector('.seconds');

  hour.style.transform = `rotate(${hrotation}deg)`;
  minutes.style.transform = `rotate(${mrotation}deg)`;
  seconds.style.transform = `rotate(${srotation}deg)`;
});

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