Initially, I acknowledge that this code may not be the most elegant. I have simplified it to show only the essentials.
My objective is to dynamically create a @-webkit-keyframe based on input, generate a class, and then apply that class so an object can cycle through selected colors.
The issue I'm encountering is that when constructing my keyframe rule and inserting elements from my array, they end up separated by commas. I've attempted using .replace(", ", " ") without success.
Is there a method to remove those commas in order for my rule to be correctly formatted? The keyframe functions properly if only one box is checked, but fails to produce the desired outcome when multiple boxes are checked. The problematic array causing issues is keyframeRules found on line 51 of the pen.
Additionally, this is only my second post ever, so apologies if I'm not adhering to the correct etiquette with the code snippets.
http://codepen.io/JoeyCinAZ/pen/shgca
function keyframeValues() {
//declare an array to store values of checked boxes in
var colors = [];
//get values of checked boxes
var boxPicker = document.getElementsByName('test');
for(i = 0; i < boxPicker.length; i++) {
if(boxPicker[i].checked) {
var color = (boxPicker[i].alt);
colors.push(color);
}
}
//declare variable to store length of the array, and a list of colors to be used
var howMany = colors.length;
var useColors = colors;
var fraction;
if(howMany === 0) {
alert('error');
}
else if(howMany === 1){
fraction = (1/howMany) * 100;
}
else{
fraction = (1/howMany).toFixed(2) * 100;
}
//give each line an incremental percentage
var count = 1;
//declare an array that will store the percentages for each line in the keyframe
var myPercent = [];
for( i = 0; i < howMany; i++) {
var increment = count * fraction;
var inc = increment;
myPercent.push(increment);
count++;
}
var usePercentages = myPercent;
createKeyframe(howMany, usePercentages, useColors )
}
//create a function that takes in parameters to create the keyFrame
function createKeyframe(lineNums, usePercentages, strokecolor) {
//create a unique name for the keyframe
var keyframeName = "keyname" + lineNums;
//create a keyframe that can be used to style the bed appropriately
var line1 = "@-webkit-keyframes " + keyframeName + "{ \n0% { stroke: white; } \n";
//create an array to store individual rules for the keyframe
var keyframeRules = [];
//use a loop to create additional lines to the keyframe
for(i = 0; i < lineNums; i++) {
var rule = usePercentages[i] + '% { background-color: ' + strokecolor[i] + '; } \n';
keyframeRules.push(rule);
}
//create keyframe
var useKeyframe = line1 + keyframeRules + '}' + '\n.' + keyframeName + '{\n-webkit-animation: ' + keyframeName + ' 2000ms ease infinite;\n}';
var classToAssign = '.' + keyframeName + '{\n-webkit-animation: ' + keyframeName + ' 2000ms ease infinite;\n}';
//create class variable for inline assignment
var dot = classToAssign.indexOf('.');
var keyframeLength = keyframeName.length + 1;
var inlineClass = classToAssign.slice(1, keyframeLength);
//create style element to insert newly created keyframe into
var newStyle = document.createElement('style');
newStyle.id = "myStyle";
//attach new style element to <head> tag
document.head.appendChild(newStyle);
var ss = document.getElementById('myStyle');
ss.textContent = useKeyframe;
//assign newly created class to element
var useBed = document.getElementById('bed');
useBed.setAttribute('class', inlineClass);
}