Блог

Я пытаюсь заставить мои кнопки менять цвет при нажатии. Простая кнопка становится зеленой, средняя — желтой, жесткая — красной, а безумная — черной. Когда я нажимаю любую кнопку с первой попытки, это работает, однако, когда я нажимаю на другую кнопку, предполагается, что все кнопки возвращаются к белому цвету и кнопка, которую я нажал, изменяется на указанный цвет. Прямо сейчас мой код сбрасывает его обратно по умолчанию и не показывает цвет нажатой кнопки.

 document.querySelectorAll(".difficulty-button").forEach((gameMode) => {
  gameMode.addEventListener("click", function() {
    let linkColour = window.getComputedStyle(gameMode);
    document.querySelectorAll(".difficulty-button").forEach((item) => {
      item.style.backgroundColor = "green";
      item.style.color = "black";
    });
    gameMode.style.backgroundColor = linkColour.backgroundColor;
  });
});  

 ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0;
  list-style: none;
}

button {
  box-shadow: none;
  outline: none;
  width: 10em;
  height: 3.5em;
  transition: 0.25s linear;
  cursor: pointer;
  background-color: white;
}

li:nth-child(1) button:hover {
  background-color: rgb(51, 165, 50);
  color: white;
}

li:nth-child(2) button:hover {
  background-color: rgb(255, 255, 0);
}

li:nth-child(3) button:hover {
  background-color: rgb(204, 50, 50);
  color: white;
}

li:nth-child(4) button:hover {
  background-color: black;
  color: white;
}  

 <ul>
  <li><button class="difficulty-button">Easy</button></li>
  <li><button class="difficulty-button">Medium</button></li>
  <li><button class="difficulty-button">Hard</button></li>
  <li><button class="difficulty-button">Insane</button></li>
</ul>  

Причина, по которой это работает только в первый раз, связана с тем, как вы получаете цвет для применения к кнопке, и как вы применяете новый цвет.

Почему это не работает:

Вы используете getComputedStyle , чтобы получить цвет кнопки при нажатии. При первом нажатии применяется класс наведения, поэтому для использования используется тот, который вы нажали.

Однако затем javascript изменяет все кнопки на зеленый цвет напрямую, используя встроенные стили. Они переопределят любой другой применяемый CSS. Теперь при каждом нажатии все кнопки становятся зелеными, так что цвет снова применяется.

Как заставить это работать: как поменять местами классы CSS по щелчку

Вы могли бы жестко закодировать цвета в функции JS и иметь if, чтобы проверить, какая это кнопка. Но более гибкий способ сделать это — снова использовать ваши классы.

1. Настройте свои классы CSS. У нас уже есть правила, настроенные для нужных вам цветов, поэтому, если мы дадим имя класса, мы сможем использовать их в js, например

 .colorbutton-1,   /* give the existing 1st button CSS a class called "colorbutton-1" */
li:nth-child(1) button:hover{
    background-color: rgb(51, 165, 50);
    color: white;
}
  

Сделайте это для каждой кнопки, а также установите ее для невыбранного состояния по умолчанию, например

 .colorbutton-0{
    background-color:green;
    color: black;
}
  

Обратите внимание, что все классы начинаются с одного имени colorbutton — это важно! Это то, что мы будем использовать в js позже.

2. Напишите функцию для замены классов на кнопках в зависимости от того, что было нажато. Мы передадим кнопку и какой номер кнопки это (т. Е. 1,2,3,4).

В функции мы удаляем все классы, начинающиеся с colorbutton , а затем добавляем новый класс — он состоит из colorbutton- и номера кнопки. Если мы хотим применить невыбранный стиль, мы используем 0.

 function swapClass(btnElement, btnNum){
    // remove all existing classes  starting with "colorbutton"
    btnElement.classList.forEach(className => {
        if (className.startsWith('colorbutton')) 
            btnElement.classList.remove(className);
    });
     // now add the new class
    btnElement.classList.add('colorbutton-'  btnNum);
}
  

3. Добавьте прослушиватели кликов для прослушивания кликов и изменения классов в зависимости от того, какая кнопка была нажата.

 // add a "counter" in forEach that passes the index of the element being processed, e.g. 0,1,2 etc
document.querySelectorAll(".difficulty-button").forEach((gameMode, btnNum) => {
    // add the click listener for the current button
    gameMode.addEventListener("click", function () {
        // on a click, remove all 'colorbutton' classes and set them to the default
        document.querySelectorAll(".difficulty-button").forEach((item) => {
            swapClass(item, 0);
        });
        // add the class for this button, passing in the class number to generate the classname
        swapClass(this, (btnNum 1));
    });
});
  

Рабочий пример, объединяющий все это:

 document.querySelectorAll(".difficulty-button").forEach((gameMode, btnNum) => {
    gameMode.addEventListener("click", function () {
        document.querySelectorAll(".difficulty-button").forEach((item) => {
            changeClass(item, 0);
        });
        changeClass(this, (btnNum 1));
    });
});

function changeClass(btnElement, classRef){
    // remove all existing classes  starting with "colorbutton"
    btnElement.classList.forEach(className => {
        if (className.startsWith('colorbutton')) 
            btnElement.classList.remove(className);
    });
     // now add the new class
    btnElement.classList.add('colorbutton-' classRef);
}  

 ul {
    display: flex;
    justify-content: center;
}
ul li {
    padding: 0;
    list-style: none;
}
button {
    box-shadow: none;
    outline: none;
    width: 10em;
    height: 3.5em;
    transition: 0.25s linear;
    cursor: pointer;   
    background-color: white;
}

.colorbutton-0{
    background-color:green;
    color: black;
}
.colorbutton-1,
li:nth-child(1) button:hover{
    background-color: rgb(51, 165, 50);
    color: white;
}
.colorbutton-2,
li:nth-child(2) button:hover{
    background-color: rgb(255, 255, 0);
}
.colorbutton-3,
li:nth-child(3) button:hover{
    background-color: rgb(204,50,50);
    color: white;
}
.colorbutton-4,
li:nth-child(4) button:hover{
    background-color: black;
    color: white;
}  

 <ul>
  <li><button class="difficulty-button">Easy</button></li>
  <li><button class="difficulty-button">Medium</button></li>
  <li><button class="difficulty-button">Hard</button></li>
  <li><button class="difficulty-button">Insane</button></li>
</ul>  

Точно так же, как псевдокласс, который вы используете для button:hover , CSS также предоставляет псевдоклассы для active и visited . Вы должны быть в состоянии сделать что-то вроде следующего, что изменило бы цвет кнопки после ее выбора и вернуло бы его при выборе новой кнопки.

 li:nth-child(4) button:active {
    background-color: black;
    color: white;
}