How to change the font and colour of individual array elements

Question

The user is able to click anywhere on the screen and the paragraphs are printed out one by one in the mouse location that the user chooses. However I want to have these paragraphs in different styles so my question is, how do I have different css elements for each paragraph in the array? Any help would be much appreciated.

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

This is my code so far so how can I incorporate css into these individual paragraphs?

Answer 1

So one way is to have a class for each element. Put all the classes in a array like the text and assign the relative classes to the relative element’s classlist. But if you have an undefined number of elements and each of these needs a different class you might want to have a common class for the common features and modify the styles based on each paragraphs needs.

const texts = [
  "Paragraph: 1",
  "Paragraph: 2",
  "Paragraph: 3",
  "Paragraph: 4",
  "Paragraph: 5",
  "Paragraph: 6",
  "Paragraph: 7",
  "Paragraph: 8",
  "Paragraph: 9",
  "Paragraph: 10"
];
const classes = [
  "red gray-bg font-1",
  "blue font-2",
   "red",
  "blue",
   "red",
  "blue",
   "red",
  "blue",
   "red",
  "blue",
  
];
// 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];


  //set its position and position style
  div.classList=classes[currentParaIdx];
  div.style.position = "absolute";
  div.style.left = clientX + "px";
  div.style.top = clientY + "px";
  currentParaIdx++;
  document.body.append(div); //add div to the page
});

.red{color:red}
.blue{color:blue}
.gray-bg{ background:darkgreen;}
/*CHANGE TEXT TO ELEMENT TO THIS CLASS*/
.font-1{font-style:italic; font-family:'system-ui'}
.font-2{font-style:italic; font-family:'serif'}
/*CHANGE TEXT TO ALL ELEMENTS*/
*{  font-family: Arial, Helvetica, sans-serif;}