不同计算器上的不同计算与我编写的计算器

Question

点击 div click、div three 背景颜色应该改变，然后在一秒钟后变回原来的颜色。我有下面的代码，它添加了 class 但页面上没有显示样式。

let temp = document.querySelector('.three');
document.querySelector('.clickhere').addEventListener('click', () => {
  temp.classList.add('.select');
  console.log(temp);
  setTimeout(function() {
    temp.classList.remove('.select');
    console.log(temp);
  }, 1000);
});

.one {
  background-color: red;
}

.two {
  background-color: green;
}

.three {
  background-color: blue;
}

.select {
  background-color: black;
}

.clickhere {
  background-color: yellow;
}

<div class="one">
  ONE
</div>
<div class="two">
  TWO
</div>
<div class="three">
  THREE
</div>
<div class="clickhere">
  CLICK HERE
</div>

Answer 1

更新了您的代码段，我只需将 .select 替换为 select

重要的是在 css class 之前使用句点，只有在使用 jQuery 选择它们时，在添加新的 class 和删除它时，您应该只像在 div 标签中一样写下它的名称。

编辑：我刚刚看到这个问题已经在评论中得到了回答，感谢@maazadeeb！ :)

let temp = document.querySelector('.three');
document.querySelector('.clickhere').addEventListener('click', () => {
  temp.classList.add('select');
  console.log(temp);
  setTimeout(function() {
    temp.classList.remove('select');
    console.log(temp);
  }, 1000);
});

.one {
  background-color: red;
}

.two {
  background-color: green;
}

.three {
  background-color: blue;
}

.select {
  background-color: black !important;
}

.clickhere {
  background-color: yellow;
}

<div class="one">
  ONE
</div>
<div class="two">
  TWO
</div>
<div class="three">
  THREE
</div>
<div class="clickhere">
  CLICK HERE
</div>

Answer 2

temp.classList.add('.select');应该更新为 temp.classList.add('select');

let temp = document.querySelector('.three');
document.querySelector('.clickhere').addEventListener('click', () => {
    temp.classList.add('select');
    setTimeout(function () {
        temp.classList.remove('select');
    }, 1000);
});

.one {
  background-color: red;
}

.two {
  background-color: green;
}

.three {
  background-color: blue;
}

.select {
  background-color: black;
}

.clickhere {
  background-color: yellow;
}

.select {
  background: coral;
}

<div class="one">
    ONE
</div>
<div class="two">
    TWO
</div>
<div class="three">
    THREE
</div>
<div class="clickhere">
    CLICK HERE
</div>

不同计算器上的不同计算与我编写的计算器

Different calculation on different calculator vs. one I scripted

javascript

css

class

add

settimeout