Как изменить текстовое содержимое нескольких HTML-тегов с помощью JavaScript?

Например:

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

Как видите, есть тег 3 абзаца с другим номером. Итак, с помощью JavaScript читаем содержимое тега p и изменяем текст в соответствии с содержимым, полученным из тега p.

Предположим, что первый тег p имеет содержимое 1, поэтому изменил его на "активный". Второй тег p имеет содержимое 2, поэтому изменил его на "деактивирован", а третий тег содержит 3, поэтому изменил его на "другие".

Где вывод выглядит так:

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

Даже если мы изменили порядок тегов p на это:

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

вывод должен быть:

<p> Deactivated </p>
<p> Others </p>
<p> Active </p>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
30
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете использовать switch и .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>

Большое спасибо за то, что это помогло мне лучше понять

Sandeep Shrestha 17.05.2022 12:22

вы можете создать хэш, например > var hash = { '1' : 'Активно', '2' : 'Деактивировано', '3': 'Другие' }, а затем использовать этот хэш вместо регистра переключения, например: ele.innerText = хэш[ele.innerText]

Zamir Manihar 17.05.2022 14:52

Используйте массив со значениями, которые вам нужны, для каждого абзаца преобразуйте исходное значение textValue в число и извлекайте значение из массива, используя это число.

Или используйте какой-нибудь шаблоны.

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>

Другие вопросы по теме