只需更改 .css
中 .p-header
的属性,
显示:“无”
。
到
显示:' block '
使用JS。
我在执行前检查了 chrome 工具,display:'none'
未显示在 html
中。
但是它所在的标签没有显示,就像 display,'none'
的用途一样。
运行脚本后,display: 'block'
通过 html
中的 .js
动态显示。但屏幕上什么也没有出现
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);
});
最佳答案
“display”不是 html 元素的属性。
“style”是一个属性。
这两个都可以 -
phead.style.display = 'block';
phead.style.setProperty('display', 'block');
解释-
显示是样式的一个属性。 style是html元素的一个属性。
关于javascript - 显示: none & setAttribute() not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60133433/