React音乐应用进度条Hover显示指示器报错：Uncaught TypeError: Cannot set properties of undefined (setting 'display')

嘿，我一眼就看出你报错的原因啦！这个Uncaught TypeError是因为你在操作DOM元素的时候犯了一个小错误：

错误根源 #

document.getElementsByClassName()方法返回的是一个HTMLCollection（类数组对象），而不是单个DOM元素。你直接给这个集合设置.style.display，自然会报“无法给undefined设置属性”的错——因为集合本身没有style属性呀！

修正方案 #

我们需要从这个集合里取出具体的元素（比如第一个匹配的元素，用[0]索引），而且最好提前把需要操作的DOM元素缓存起来，避免每次触发事件都重新查询DOM，性能更优。

下面是修正后的JavaScript代码：

// 提前获取并缓存DOM元素
const progressContainer = document.getElementsByClassName('rhap_progress-container')[0];
const progressIndicator = document.getElementsByClassName('rhap_progress-indicator')[0];

// 绑定鼠标悬停事件
progressContainer.onmouseover = function() {
  progressIndicator.style.display = "block";
};

progressContainer.onmouseout = function() {
  progressIndicator.style.display = "none";
};

更简洁的写法（可选） #

如果你觉得getElementsByClassName加索引有点麻烦，也可以用document.querySelector()，它会直接返回第一个匹配的DOM元素：

const progressContainer = document.querySelector('.rhap_progress-container');
const progressIndicator = document.querySelector('.rhap_progress-indicator');

progressContainer.onmouseover = () => progressIndicator.style.display = "block";
progressContainer.onmouseout = () => progressIndicator.style.display = "none";

确认其他代码没问题 #

你的HTML结构和CSS设置都是正确的——CSS里默认把.rhap_progress-indicator设为display: none，悬停时切换为block的逻辑完全合理。

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