When anywhere on the body is clicked, different sentences should pop up in the mouse location

Question

I'm trying to create an interactive website where the user is able to click on any section of a blank screen and the text will show up in that exact position where the user clicks. It would be greatly appreciated if anyone knows how to do this. Every time the user clicks, a new sentence appears and there's only so many times you can click the page.

var quotes = ["quote1", "quote2"];
var current = 0;

function changeQuote() {
  if (current >= quotes.length) current = 0;
  document.getElementById("paragraph").innerHTML(quotes[current]);
  current++;
}

document.body.onclick = changeQuote;

This is what I started with but this doesn't seem to working, would I need an EventListener and how would I go about this?

Answer 1

document.addEventListener('click', (e) => {

  const {
    clientX,
    clientY
  } = e; //get the click position

  //create the div    
  const div = document.createElement('div');

  //set its text
  div.innerText = 'some text';

  //set its position and position style
  div.style.position = "absolute";
  div.style.left = clientX + 'px';
  div.style.top = clientY + 'px';

  document.body.append(div);//add div to the page
})