How to display array elements individually after mouse click

Question

I am creating an interactive website which consists of multiple paragraphs gradually being displayed once the user clicks anywhere on screen. I want these paragraphs put into an array and then displayed in the order that they are set. When a user clicks screen - show paragraph 1, when a user clicks screen again - show paragraph 2 and so on while keeping them all on the screen.

However I am not sure how to combine both these elements in javascript, I have the EventListener function working but how would I go about displaying the array. In a for loop etc? If anyone knows how to do this it would be greatly appreciated.

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 = "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
});

How would I incorporate the array paragraphs on each click one by one?

When the user clicks a second time, do you want the paragraph 2 to be displayed separately or in place of Para 1? — Shivangam Soni
– Shivangam Soni, Commented Nov 24, 2022 at 14:24
Placed separately as the user is able to click anywhere on the screen and the text appears in that exact mouse location — wophi_1888
– wophi_1888, Commented Nov 24, 2022 at 14:25
That's a placeholder for now, I want to place the array where it says "text" and create a for loop as with each the click on the screen the paragraph is different — wophi_1888
– wophi_1888, Commented Nov 24, 2022 at 14:28
Create an array of strings, each element holding the paragraph content. Then in your click handler increment the index, and set div.innerText to the array element at that index. — tromgy
– tromgy, Commented Nov 24, 2022 at 14:30

Shivangam Soni · Accepted Answer · 2022-11-24 14:30:20Z

You just need an Active Tracker Variable

const texts = [
  "Paragraph: 1",
  "Paragraph: 2",
  "Paragraph: 3",
  "Paragraph: 4",
  "Paragraph: 5",
  "Paragraph: 6",
  "Paragraph: 7",
  "Paragraph: 8",
  "Paragraph: 9",
  "Paragraph: 10"
];

// Keeps Track of Current Text
let currentParaIdx = 0;

document.addEventListener("click", (e) => {
  // Stop once All Texts are Displayed
  if (currentParaIdx === texts.length) return;

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

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

  //set its text
  div.innerText = texts[currentParaIdx];
  currentParaIdx++;

  //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
});

Collectives™ on Stack Overflow

How to display array elements individually after mouse click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related