How to change text content of multiple html tags using JavaScript?-CodePudding

For example:

<p> 1 </p>
<p> 2 </p>
<p> 3 </p>

As you can see that, there are 3 paragraph tag with the different number. So, using JavaScript read the content of the p tag and changed the text according to the content received from the p tag.

Suppose, first p tag has content 1 so changed it into "active". Second p tag has content 2 so changed it into "deactivated" with that third tag contain 3 so changed it into "others".

Where output seems like:

<p> Active </p>
<p> Deactivated </p>
<p> Others </p>

Even if we changed the p tag order to this:

<p> 2 </p>
<p> 3 </p>
<p> 1 </p>

the output must be:

<p> Deactivated </p>
<p> Others </p>
<p> Active </p>

CodePudding user response：

Use an array with the values you need, for each paragraph convert the original textValue to a number and retrieve the value from the array using that number.

Or use some kind of templating.

const values = [`Active`, `Deactivated`, `Others`];
document.querySelectorAll(`p`).forEach( (p) =>
  p.textContent = values[ (p.textContent.trim()) - 1]);

<p> 1 </p>
<p> 3 </p>
<p> 2 </p>
<p> 3 </p>
<p> 1 </p>
<p> 2 </p>

CodePudding user response：

You can use switch and .innerText

const pEles = [...document.querySelectorAll("p")];

pEles.forEach(ele => {
  switch (ele.innerText) {
    case "1":
      ele.innerText = "Active"
      break;
    case "2":
      ele.innerText = "Deactivated"
      break;
    case "3":
      ele.innerText = "Others";
      break;
  }
})

<p>1</p>
<p>2</p>
<p>3</p>