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

Question

On clicking div click , div three background color should change and then change back after a second. I have the code below which adds the class but the style doesn't show on the page.

 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

Updated your snippet, I only had to replace .select with select

It's important to use period before the css classes only when selecting them with jQuery, when adding a new class and removing it, you should just write the name of it like you would inside the div tag.

EDIT: I just saw that the question was already answered in the comments, credits to @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 '); should be update as 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>