I wanted to make blinking rectangle with for loop. I created this code:
Function makeRectangle creates rectangle.
Function blink takes created rectangle to change color.
It works but only once. Can someone explain me why?
function makeRectangle(width, height, color, x, y) {
let rectangle = svg.append('rect').attr('height', height).attr('width', width).attr('x', x).attr('y', y).attr('fill', color);
return rectangle;
}
function blink(rectangle, color, repeat) {
for (let i=0; i<repeat; i++) {
rectangle.transition().duration(1500).attr('fill', color).transition().duration(1500).attr('fill', 'red');
console.log('Repetition: ', i)
}
}
let rect2 = makeRectangle(20, 20, 'red', 20, 20);
blink(rect2,'yellow', 5);