با استفاده از JavaScript یک دکمه بسازید که با هر کلیک رنگ پس‌زمینه یک باکس را بین سه رنگ متفاوت تغییر دهد و هم‌زمان کلاس CSS به نام "active" را روی باکس اضافه یا حذف کند.

برای حل این مسئله از DOM و JavaScript استفاده کنید: با document.querySelector المان‌های دکمه و باکس را بگیرید، یک آرایه از سه رنگ تعریف کنید و با addEventListener روی دکمه هر کلیک شمارنده‌ای را افزایش دهید تا رنگ بعدی از آرایه انتخاب و با element.style.backgroundColor تنظیم شود یا بهتر از classList.toggle('active') برای اضافه/حذف کلاس استفاده کنید؛ در CSS کلاس "active" و رنگ‌ها را تعریف کنید و برای جلوه بهتر از transition استفاده کنید. نکته: استفاده از classList.toggle و کلاس‌های CSS معمولاً از قرار دادن استایل‌های inline بهتر و قابل نگهداری‌تر است.