Как я могу изменить эту функцию на случайную по клику? в настоящее время придерживается одного класса цвета из 4 вариантов

Question

Пытается заставить скрипт работать «по щелчку», выбрав один из 4-х случайных цветовых классов.

В настоящее время выбирает один случайным образом, но не обновляется при отдельных щелчках #myNav.

Я также пытался использовать toggleClass, однако я считаю, что это связано с плохим кодированием, так как я очень плохо знаком с js.

$(document).ready(function(){
var colors = ['black','blue','mistyrose','white'];
var new_color = colors[Math.floor(Math.random()*colors.length)];
$('#myNav').addClass(new_color);
});

Answer 1

может быть это

$(document).ready(function() {
  var colors = ['black','blue','mistyrose','white'];

  function getRandomColor() {
    return colors[ Math.floor(Math.random() * colors.length) ];
  }

  $('.button').click(function() {
    var color = getRandomColor();
    $('#myNav').addClass(color);
  });
});

Answer 2

Попробуйте

myNav.classList.toggle(new_color);

function changeColor() {
  var colors = ['black', 'blue', 'mistyrose', 'white'];
  var new_color = colors[Math.floor(Math.random() * colors.length)];
  myNav.classList.toggle(new_color);
}

.box { width: 100px; height: 100px; border: 1px solid black; cursor: pointer; }

.black { background: black; }
.blue { background: blue; }
.mistyrose { background: mistyrose; }
.white { background: white; }

<div id="myNav" class="box" onclick="changeColor()"></div>