Кнопка "Мне не нравится", как YouTube, используя javascript

Question

HTML

<i class="fas fa-thumbs-up" onclick="like()"></i>
<i class="fas fa-thumbs-down" onclick="dislike()"></i>

JavaScript

var color1 = document.getElementsByClassName('fa-thumbs-up')[0];
var color2 = document.getElementsByClassName('fa-thumbs-down')[0];

function like(){
  if(color1.style.color== "black"){
    color1.style.color= "blue";
  }
  else if(color1.style.color == "blue"){
    color1.style.color = "black";
  }
  else if (color2.style.color == "blue") {
    color2.style.color = "black";
  }
}

function dislike(){
  if (color2.style.color == "black") {
    color2.style.color = "blue";
  }
  else if (color2.style.color == "blue") {
    color2.style.color = "black";
  }
  else if (color1.style.color == "blue") {
    color1.style.color = "black";
  }
}

Пожалуйста, помогите мне сделать такие кнопки, как YouTube. Мой код не работает. Мне нужно сделать одну кнопку синей, когда я нажму на нее, а если нажать на другую кнопку, то первая из них должна превратиться в предыдущий цвет.

Answer 1

Это намного проще, чем вы. Просто используйте следующий код для своих функций:

function like() {
    color1.style.color = color1.style.color === 'blue' ? 'black': 'blue';
    color2.style.color = 'black';
}

function dislike() {
    color1.style.color = 'black';
    color2.style.color = color2.style.color === 'red' ? 'black' : 'red';
}

Answer 2

ИСПОЛЬЗУЙТЕ ЭТОТ КОД

function like() {
  if(color1.style.color == "blue") {
    color1.style.color = "black";
  } else {
    color1.style.color = "blue";
  }
  color2.style.color = "black";
}

function dislike() {
  if (color2.style.color == "blue") {
    color2.style.color = "black";
  } else {
    color2.style.color = "blue";
  }
  color1.style.color = "black";
}