display: none & setAttribute () не работает

Question

Простое изменение атрибута на .p-header в .css с, display: 'none'. до display:'block' с использованием JS.

Я проверял chrome инструментов перед выполнением, и display:'none' не отображается в html.

Тем не менее тег, в котором он находится, не отображается, как display,'none' предназначен для.

После запуска сценария display: 'block' появляется динамически через .js в html. Но на экране ничего не появляется

html

<header>
        <h1>Take the Dog Quiz</h1>
        <p class="p-header">You scored: <span class="p-span"></span></p>
    </header>
    <main>
        <form action="#">
            <div class="q1-div">
                <h5>Can dogs run?</h5><br>
                <label for="q1" id="q1">Yes.</label><br>
                <input type="radio" name="q1" id="q1" value="a" checked><br>
                <label for="q1">No.</label><br>
                <input type="radio" name="q1" id="q1" value="b">
            </div>

            <div class="q2-div">
                <h5>Are dogs invisible?</h5><br>
                <label for="q2">Yes.</label><br>
                <input type="radio" name="q2" id="q2" value="a" checked><br>
                <label for="q2">No.</label><br>
                <input type="radio" name="q2" id="q2" value="b">
            </div>

            <div class="q3-div">
                <h5>Does a dog have 4 legs?</h5><br>
                <label for="q3">Yes.</label><br>
                <input type="radio" name="q3" id="q3" value="a" checked><br>
                <label for="q3">No.</label><br>
                <input type="radio" name="q3" id="q3" value="b">
            </div>

            <div class="q4-div">
                <h5>Can a dog fly?</h5>
                <label for="q4">Yes.</label><br>
                <input type="radio" name="q4" id="q4" value="a" checked><br>
                <label for="q4">No.</label><br>
                <input type="radio" name="q4" id="q4" value="b">
            </div>

            <input type="submit" value="Submit">
        </form>

    </main>


    <script src="index.js"></script>

Css

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

`` `js``

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();
    //remove display: none from css script to block
    phead.setAttribute('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);


});

Answer 1

'display' не является атрибутом элемента html.
'style' является атрибутом.

Оба они будут работать -

phead.style.display = 'block';

phead.style.setProperty ('display', 'block');

Пояснение -
Отображение является свойством стиль. стиль является атрибутом элемента html.