How to change the font and colour of individual array elements-CodePudding

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?

CodePudding user response：

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