Вывести у одинаковых классов содержимое div

@pahom6233 · Регистрация: 18.08.2019

Студворк — интернет-сервис помощи студентам

Доброго времени суток!

Возникли сложности с выполнением, как мне кажется, простой задачи. Сама задача:

Нужно, чтобы при нажатии на блок div, можно было получить содержимое div. Выводимое содержимое (текст) должно соответствовать нажатому блоку и при этом имя класса этих блоков одинаковое.

Не могу правильно сформулировать вопрос, надеюсь что с кодом будет понятнее. Вот пример моего кода:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class='red'>Блок с новостями 1</div>
<div class='red'>Блок с новостями 2</div>
<div class='eto_ne_red'>Блок с новостями 3</div>
<div class='red'>Блок с новостями 4</div>
<div class='red'>Блок с новостями 5</div>
 
<script>
  var e = document.getElementsByClassName('red');
  var i;
  for (i=0; i<e.length; i++)
  {     
    e[i].onclick = function ()
    {
      for (i=0; i<e.length; i++)
        {
            var txt = e[i].innerText;
            alert(txt);
        }
    }
  }
</script>

Сейчас скрипт выводит содержимое всех блоков 'red' поочерёдно, а надо чтобы выводил содержимое конкретно нажатого блока 'red'.

.

@Antiplayer · 04.10.2019, 15:57

Так а зачем второй фор?

JavaScript
1
2
3
4
5
6
7
8
9
  var e = document.getElementsByClassName('red');
  var i;
  for (i=0; i<e.length; i++)
  {     
    e[i].onclick = function (event)
    {
        alert(event.target.textContent); //можно было бы использовать this.textContent, но я не сторонник его использования
    }
  }

@pahom6233 · 04.10.2019, 16:06 **[ТС]**

Я нуб в JS

P.s Я в шоке! Как на этом форуме нормально ответить на сообщение с привязкой к нику???

@Mr_Sergo · 04.10.2019, 16:22

pahom6233,

https://codepen.io/Mr_Sergo/pe... itors=1010

JavaScript
1
2
3
document.addEventListener('click',e => {
    if (e.target.className == 'red') alert(e.target.textContent);
});

@Mr_Sergo · 04.10.2019, 16:29

Сообщение от pahom6233

Как на этом форуме нормально ответить на сообщение с привязкой к нику???

так

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Вывести у одинаковых классов содержимое div

Решение

Решение

@pahom6233 5 / 4 / 3 Регистрация: 18.08.2019 Сообщений: 108
	04.10.2019, 16:06 [ТС]
	Я нуб в JS P.s Я в шоке! Как на этом форуме нормально ответить на сообщение с привязкой к нику??? 0