JavaScript结合CSS答题进度条填充失效问题排查

你推测的「无法获取progressBarFull元素」不成立，script标签放在body尾部，DOM加载完成后才执行JS，元素获取正常，进度条不更新的核心原因有2个，附带1个视觉适配问题：

• 进度条宽度赋值的模板字符串存在多余换行，生成的CSS宽度值带无效空白字符，浏览器无法解析
• 题目结束判断条件写错变量，将题目计数器QuestionCounter误写为题目DOM元素question，会导致逻辑判断异常
• CSS中进度条填充块高度写死为3.4rem，和父容器4rem高度减去0.6rem边框后的可用高度不匹配，会出现填充缝隙

1. 修正game.js逻辑错误 #

找到getNewQuestion函数，做两处修改：

1. 修正结束判断的变量错误：

// 原错误代码
if(AvailableQuestion.length == 0 || question>= MAX_QUESTIONS){

// 修改为
if(AvailableQuestion.length == 0 || QuestionCounter >= MAX_QUESTIONS){

2. 修正进度条宽度赋值的换行问题，去掉模板字符串内的换行：

// 原错误代码
progressBarFull.style.width = `${(QuestionCounter / MAX_QUESTIONS) * 100}
%`

// 修改为
progressBarFull.style.width = `${(QuestionCounter / MAX_QUESTIONS) * 100}%`

2. 修正game.css进度条样式 #

修改#progressBarFull样式，让高度自适应父容器，避免填充缝隙：

#progressBarFull{
    height: 100%;
    background-color:#56a5eb;
    width: 0%;
    box-sizing: border-box;
}

修改完成后刷新页面，每完成一道题进度条会自动填充对应比例宽度，答完所有题目自动跳转至结束页。

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