通过Fetch设置进度条宽度时触发TypeError错误求助

错误原因分析 #

报错Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'width')的核心问题是：你尝试修改style.width的对象是undefined——也就是进度条的DOM元素没有被正确获取到。常见诱因包括：

• JS代码在DOM渲染完成前执行，此时目标元素还未生成
• DOM选择器（id/类名）拼写错误，匹配不到对应元素
• 进度条元素本身不存在于HTML结构中

分步解决与实现 #

1. 确保DOM加载完成后执行JS #

把JS代码放在DOMContentLoaded事件回调里，或者直接把script标签放在HTML末尾（</body>之前），保证执行代码时进度条元素已经存在。

2. 修正DOM元素获取逻辑 #

检查选择器是否和HTML中的进度条元素匹配，比如用document.getElementById()或document.querySelector()精准获取元素。

3. 结合Fetch实现动态进度条（宽度+颜色） #

下面是完整的可运行代码示例，包含HTML、CSS和修正后的JS，实现根据Fetch返回的数据动态设置进度条宽度和颜色：

HTML结构

<div class="progress-container">
  <div id="progress-bar" class="progress-bar"></div>
</div>
<button id="fetch-btn">获取数据并更新进度条</button>

CSS样式

.progress-container {
  width: 100%;
  height: 20px;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
}

.progress-bar {
  height: 100%;
  width: 0; /* 初始宽度设为0，后续动态修改 */
  transition: width 0.3s ease; /* 平滑过渡效果 */
}

JavaScript代码

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', () => {
  const progressBar = document.getElementById('progress-bar');
  const fetchBtn = document.getElementById('fetch-btn');

  fetchBtn.addEventListener('click', async () => {
    try {
      // 模拟Fetch请求获取进度数据（实际替换为你的接口地址）
      const response = await fetch('https://api.example.com/progress-data');
      const data = await response.json();
      
      // 假设返回的数据结构是 { progress: 75, color: '#2ecc71' }
      const { progress, color } = data;

      // 检查进度条元素是否存在，避免报错
      if (progressBar) {
        progressBar.style.width = `${progress}%`;
        progressBar.style.backgroundColor = color;
      }
    } catch (error) {
      console.error('请求失败:', error);
      // 错误时可以设置默认样式，比如显示红色错误状态
      if (progressBar) {
        progressBar.style.width = '100%';
        progressBar.style.backgroundColor = '#e74c3c';
      }
    }
  });
});

关键注意点 #

• 始终在操作DOM元素前做存在性检查（if (progressBar)），即使你确定元素存在，也能避免意外报错
• Fetch是异步操作，要确保在await获取数据后再修改DOM，不要在Promise未resolve时操作
• 如果你的进度条是动态生成的（比如通过JS添加到DOM），要确保在元素生成后再执行获取和修改逻辑

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