Steps for showcasing each element of an array separately upon a mouse click

Question

Steps for showcasing each element of an array separately upon a mouse click

I am working on a website where each click on the screen reveals a new paragraph gradually. I plan to organize these paragraphs in an array and display them one after the other in sequential order upon user interaction. The challenge lies in combining these two aspects through javascript - while the EventListener function works, incorporating the array for display remains unclear. Any guidance on how to achieve this would be highly 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
});

Any suggestions on how to integrate the array of paragraphs so that they are displayed one by one with each click?

javascript arrays arraylist onclick mouseevent

Answer 1

Answer №1

To achieve this, you will require an Active Tracker Variable

const phrases = [
  "Line: One",
  "Line: Two",
  "Line: Three",
  "Line: Four",
  "Line: Five",
  "Line: Six",
  "Line: Seven",
  "Line: Eight",
  "Line: Nine",
  "Line: Ten"
];

// Keeping Track of the Current Phrase
let currentLineIndex = 0;

document.addEventListener("click", (e) => {
  // Exits once all Phrases are shown
  if (currentLineIndex === phrases.length) return;

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

  // Creating a new div element
  const divElement = document.createElement("div");

  // Assigning text to the div
  divElement.innerText = phrases[currentLineIndex];
  currentLineIndex++;

  // Setting its position and styling
  divElement.style.position = "absolute";
  divElement.style.left = clientX + "px";
  divElement.style.top = clientY + "px";

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

Answer 2

To achieve this, you will require an Active Tracker Variable

const phrases = [
  "Line: One",
  "Line: Two",
  "Line: Three",
  "Line: Four",
  "Line: Five",
  "Line: Six",
  "Line: Seven",
  "Line: Eight",
  "Line: Nine",
  "Line: Ten"
];

// Keeping Track of the Current Phrase
let currentLineIndex = 0;

document.addEventListener("click", (e) => {
  // Exits once all Phrases are shown
  if (currentLineIndex === phrases.length) return;

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

  // Creating a new div element
  const divElement = document.createElement("div");

  // Assigning text to the div
  divElement.innerText = phrases[currentLineIndex];
  currentLineIndex++;

  // Setting its position and styling
  divElement.style.position = "absolute";
  divElement.style.left = clientX + "px";
  divElement.style.top = clientY + "px";

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

Steps for showcasing each element of an array separately upon a mouse click

Answer №1

Similar questions

In my React JS class component, I am looking to have the image display switch each time the button is clicked

Warning: The use of the outdated folder mapping "./" in the "exports" field for module resolution in the package located at node_modulespostcsspackage.json is deprecated

JavaScript comparing elements within an array

When using Vue.js, the class binding feature may not function properly if it is referencing another data property that has variants

An effective way to prevent right-clicking on iframes across all websites

Guide to accessing a nested and potentially optional object property with a default value and specifying its data type

What improvements does IE7 offer compared to IE6?

Including jQuery in an Angular project generated with JHipster

JavaScript code that uses jQuery does not function properly on an HTML form

Discovering the nearest sibling using jQuery

Troubleshooting loading specific story types on hacker news API with Angular.js

Invoking a React function repeatedly (every second)

Managing information retrieved from an asynchronous HTTP request

How can I access the rendered HTML element from a component in Vue 3?

Issue with JavaScript causing circles to form around a parent div

Adjust the appearance of a div according to the input value

Querying MongoDB findAndModify: <<< locate and modify an object within an array in a document

The combination of useEffect and Client component has the power to greatly

When it comes to using the jQuery get method, it may not always yield the desired results. However, utilizing it within a form context,

What are some strategies for improving the efficiency of this function that includes three loops?