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>

KooiInc · Accepted Answer · 2022-05-17 08:51:47Z

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>

edited May 17, 2022 at 8:51

answered May 17, 2022 at 8:41

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Heet Vakharia · Accepted Answer · 2022-05-17 08:40:48Z

0

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>

answered May 17, 2022 at 8:40

Heet Vakharia

4534 silver badges16 bronze badges

2 Comments

Sandeep Shrestha Over a year ago

Thank you so much as this one help me better to understand

Zamir Manihar Over a year ago

you can create a hash like > var hash = { '1' : 'Active', '2' : 'Deactivated', '3': 'Others' } and then use this hash instead of switch case like this : ele.innerText = hash[ele.innerText]

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related