Jump Around explainer

The aim of this puzzle: Make the ball move to a random place on the screen whenever it’s tapped.

Walkthrough of the solution: The code starts out mostly done. When you tap on the ball, it moves to a random place at the top of the screen. This is because the 'cx' is set to pickRandom(200) whenever you 'click' .on() the ball.

When the ball moves to a random 'cx', it should also move to a random 'cy'. Attach .attr('cy', pickRandom(200)) to the .attr('cx',...). You don’t need to add another .transition() because both .attr() changes should happen at the same time.

Sample code solution:
(Tap below to reveal)

let ball = svg.append('circle')
                .attr('r', 50)
                .attr('fill', pickRandom(color))
                .attr('cx', 50)
                .attr('cy', 50);

ball.on('click', ()=>{
    ball.transition()
          .attr('cx', pickRandom(200))
          .attr('cy', pickRandom(200));
});

JavaScript Concepts: Code Block (arrow function), Member Expression, Identifiers

Grasshopper Concepts: pickRandom()

D3 Concepts: .attr('cx',), .attr('cy',), .attr('fill',), .attr('r',), .on('click',), .transition()
Additional Code (hidden code that runs before the puzzle’s code):

let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);

I don’t understand what I’m doing wrong…please help

It doesn’t work. The same syntax gets blue on the fresh code