当我第二次单击事件侦听器时,会根据条件添加新类,但不会删除和/或重置以前的类。
输入一个早于 1980 年的年份并查看结果。再次单击“开始使用”并输入比 1980 年晚的年份(不要刷新页面),新结果所附的班级不会改变。
fakeEvent.addEventListener('click', function() {
let birthYear = prompt("What year were you born", "");
let currentYear = new Date().getFullYear();
let age = currentYear - birthYear;
if (age <= 40) {
result.innerHTML = `You entered ${age} years old.`;
result.classList.add('black');
} else {
result.innerHTML = `You entered ${age} years old.`;
result.classList.add('green');
}
})
.black { background: black; color: white; }
.green {background: green; color: yellow; }
h4 {
margin-top: 3rem;
}
<div class="container">
<button type="button" id="fakeEvent">Get Started</button>
<hr />
<div id="result"></div>
<h4>Enter a year older than 1980 and see the result. Click 'Get Started' again and enter a year newer than 1980 (don't refresh the page) and the class attached to the new result doesn't change.</h4>
</div>
答案 0 :(得分:1)
您可以在进行更改之前简单地清除 classList
result.classList.remove('black', 'green');
fakeEvent.addEventListener('click', function() {
let birthYear = prompt("What year were you born", "");
let currentYear = new Date().getFullYear();
let age = currentYear - birthYear;
result.classList.remove('black', 'green');
if (age <= 40) {
result.innerHTML = `You entered ${age} years old.`;
result.classList.add('black');
} else {
result.innerHTML = `You entered ${age} years old.`;
result.classList.add('green');
}
})
.black { background: black; color: white; }
.green {background: green; color: yellow; }
h4 {
margin-top: 3rem;
}
<div class="container">
<button type="button" id="fakeEvent">Get Started</button>
<hr />
<div id="result"></div>
<h4>Enter a year older than 1980 and see the result. Enter a year newer than 1980 and the class attached to the new result doesn't change.</h4>
</div>