Изменение цвета ссылки на сайт при нажатии кнопки

Question

Я создал линейный градиент, анимировал его в javascript и установил в качестве фона для моего сайта. Затем я добавил в HTML кнопку, которая при нажатии переключала цвета градиента.

Сейчас я пытаюсь заставить кнопку также изменить цвет текстовых ссылок на моей странице, но я не могу понять это. Может кто-нибудь, пожалуйста, дайте мне знать, где я ошибся? Благодарю.

Java-скрипт

var angle = 0, color = "#666", colors = "#000", font = "rgba(102, 102, 102, .3)";
var changeBackground = function() {
  angle = angle + .4
  document.body.style.backgroundImage = "linear-gradient(" + angle + 
"deg, " + colors + ", " + color + ", " + colors + ",  " + color + ",  " 
+ colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors 
+ ",  " + color + ", " + colors + ", " + color;
  requestAnimationFrame(changeBackground)
}

var changeFont = function() {
  document.a.style.color = "color(" + font;
}

changeBackground()

document.querySelector('#myBtn').addEventListener('click', function () {
  color = (color != "#666") ? "#666" : "#fff";
  colors = (colors != "#000") ? "#000" : "#6839ba";
  font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" 
: "rgba(247, 201, 180, .3)";
})

Кнопка HTML и ссылки

<main class="main">
    <button class="Btn" id="myBtn">Click</button>
    <ul class="position">
        <li class="fnup"><a href="#">fn-up   </a></li>
        <li class="about"><a href="#">about   </a></li>
        <li class="issue hover"><a href="#">issue 0 </a></li>
        <li class="contact hover"><a href="#">contact</a></li>
    </ul>
</main>

Answer 1

Вам нужно позвонить changeFont при нажатии кнопки.Вам также нужно, чтобы changeFont перебрал все a с и установил их свойство style.color.

Хотя вы можете сделать это, это довольно нечитаемо для IMO, потому что цвета слишкомпохожие:

var angle = 0, color = "#666", colors = "#000", font = "rgba(102, 102, 102, .3)";
var changeBackground = function() {
  angle = angle + .4
  document.body.style.backgroundImage = "linear-gradient(" + angle + 
"deg, " + colors + ", " + color + ", " + colors + ",  " + color + ",  " 
+ colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors 
+ ",  " + color + ", " + colors + ", " + color;
  requestAnimationFrame(changeBackground)
}

var changeFont = function() {
  document.querySelectorAll('a').forEach(a => a.style.color = font);
}

changeBackground();
changeFont();

document.querySelector('#myBtn').addEventListener('click', function () {
  color = (color != "#666") ? "#666" : "#fff";
  colors = (colors != "#000") ? "#000" : "#6839ba";
  font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" 
: "rgba(247, 201, 180, .3)";
  changeFont();
})

<main class="main">
  <button class="Btn" id="myBtn">Click</button>
  <ul class="position">
    <li class="fnup"><a href="#">fn-up   </a></li>
    <li class="about"><a href="#">about   </a></li>
    <li class="issue hover"><a href="#">issue 0 </a></li>
    <li class="contact hover"><a href="#">contact</a></li>
</main>