使用setAttribute修改display属性无效：.p-header显示异常排查

你遇到的问题根源很明确：你用错了设置CSS display属性的方法！

为什么原来的代码不生效？ #

你写的 phead.setAttribute('display', 'block') 是在给HTML元素添加一个名为display的HTML属性，而不是设置CSS样式。浏览器只会解析CSS中的display属性来控制元素可见性，不会把HTML上的display属性当成样式处理。这就是为什么你能在开发者工具里看到display="block"，但元素还是隐藏的——因为CSS里的display: none依然在生效，而且CSS样式优先级高于这种自定义HTML属性。

正确的解决方法 #

要修改元素的CSS样式，你需要操作元素的style对象，而不是用setAttribute。有几种可行的方式：

方法1：直接修改style.display（最直接）

把错误的那行代码替换成：

phead.style.display = 'block';

这会直接给元素添加行内CSS样式display: block，优先级高于外部CSS的display: none，元素就能正常显示了。

方法2：通过类名控制（更符合CSS最佳实践）

如果后续需要频繁切换显示/隐藏，建议用CSS类来管理：

1. 先修改你的CSS，把隐藏逻辑放到一个类里：

.hidden { display: none; }
.p-header { color: #111; font-size: 1em; }

2. 给HTML里的.p-header加上hidden类：

<p class="p-header hidden">You scored: <span class="p-span"></span></p>

3. 在JS里移除这个类来显示元素：

phead.classList.remove('hidden');

修正后的完整JavaScript代码 #

const answers = ['a','b','a','b']; 
const form = document.querySelector('form'); 
const p = document.querySelector('.p-span'); 
const phead = document.querySelector('.p-header'); 

//add event listener to form 
form.addEventListener('submit', e =>{ 
  e.preventDefault(); 
  // 替换成正确的样式设置方式
  phead.style.display = 'block'; 
  scrollTo(0,0); 

  let score = 0; 
  //collect user answers 
  const attemptedAnswers = [form.q1.value, form.q2.value,form.q3.value,form.q4.value]; 

  //loop and compare user answers to correct "answers". 
  //increase score total per correct answer 
  attemptedAnswers.forEach((answer, index) =>{ 
    if(answer === answers[index]){ 
      score += 25; 
    } 
  }); 

  //display animation of score with setInterval then stop interval when counter === score 
  let counter = 0; 
  const scoreboard = setInterval(()=>{ 
    p.textContent = `${counter}%`; 
    if(counter === score){ 
      clearInterval(scoreboard); 
    } 
    console.log(counter); 
    counter ++; 
  }, 10); 
}); 

额外小提醒 #

你的HTML里有多个相同id的元素（比如多个id="q1"），这是不符合HTML规范的——id必须是页面唯一的。虽然浏览器可能能正常处理，但建议把label的for属性和input的id改成唯一值，比如q1-yes、q1-no，避免潜在的问题。

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