Rotate object in div towards direction of mouse click

I have an image of an arrow that rotates around a fixed central point and I want to make it to where it moves in the direction of a mouse click. So someone can click somewhere on the screen and the arrow will point in the direction of the mouse click.

This is what the arrow looks like:

Arrow example

And this is what the code of the div looks like

content.innerHTML+= '<img class = "arrow" style="transform: rotate('+x+'deg)" src="img/arrow.png"</img>'

and the CSS for those interested:

.arrow {
  width: 200px;
  height: 10px;
  position: absolute;
  transform-origin: 100% 50%;
}

Any pointers appreciated! Thanks!