时间戳

首页 > 解决方案 > 如何在使用 vanilla JS 的下一次单击时在单击事件中添加和删除类？

javascript - 如何在使用 vanilla JS 的下一次单击时在单击事件中添加和删除类？

问题描述

当我第二次单击事件侦听器时，会根据条件添加新类，但不会删除和/或重置以前的类。

输入早于 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>

标签： javascript

解决方案

您可以在进行更改之前简单地清除 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>

推荐阅读