Изменение заполнения свойства элемента svg по клику

Question

Я новичок в JavaScript и программировании в целом.Выполняя небольшой учебный проект, я наткнулся на небольшую проблему с изменением цвета элементов SVG при нажатии.У меня есть массив определенных цветов и элемент SVG, и SVG должен менять его цвет каждый раз, когда я нажимаю на него.Вот как я пытался это сделать: http://jsfiddle.net/j0u3rman/ Может ли кто-нибудь указать на мою ошибку?

var coatColor = [
'rgb(101, 137, 164)',
'rgb(241, 43, 107)',
'rgb(146, 100, 161)',
'rgb(56, 159, 117)',
'rgb(215, 210, 55)',
'rgb(0, 0, 0)'
];

// Function for acquiring a random element from an array
var getRandomElement = function (arr) {
var randomElement = Math.floor(Math.random() * arr.length);
return randomElement;
};

var changeAppearance = userSetting.querySelector('.setup-player');
var wizardCoat = changeAppearance.querySelector('.setup-wizard .wizard- 
coat');
var changeCoat = function (arr) {
wizardCoat.style.fill = getRandomElement(arr);
}
wizardCoat.addEventListener('click', changeCoat(coatColor));

Answer 1

Я упростил ваш код, удалив ненужные мне вещи.Также вы должны знать, что иногда цвет будет одинаковым, так как случайная функция может давать вам один и тот же цвет несколько раз подряд.

var coatColor = [
'rgb(101, 137, 164)',
'rgb(241, 43, 107)',
'rgb(146, 100, 161)',
'rgb(56, 159, 117)',
'rgb(215, 210, 55)',
'gold'
];

// Function for acquiring a random element from an array
var getRandomElement = function (arr) {
  var randomElement = Math.floor(Math.random() * arr.length);
  return randomElement;
};


var changeColor = function () {
  this.style.fill = coatColor[getRandomElement(coatColor)];
}
wizard_head.addEventListener('click', changeColor);

svg{border:1px solid;}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 86" class="setup-wizard">
<defs>
  <rect id="wizard_head" x="20" y="5" width="20" height="20" />
</defs>                          
<g class="wizard">
<use xlink:href="#wizard_head" class="wizard-head"></use>
</g>
</svg>