Changing property fill of svg element on click

Question

I'm new to JavaScript and programming in general. While doing a little learning project I stumbled upon a little issue with changing the color of SVG elements on click. I have an array of certain colors and SVG element and that SVG should change it's color every time I click on it. Here's the way I tried to do it: http://jsfiddle.net/j0u3rman/ Could someone point out my mistake?

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));

user_7897395 · Answer

I've simplified your code by removing things I didn't need. Also you must know that sometimes the color will be the same since since the random function may give you the same color several times in a row.

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;}

Changing property fill of svg element on click

1 Answers