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

Question

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>

Answer 1

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>

Answer 2

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>