Как с помощью target корректно реализовать этот скрипт?

Question

[12Vadim12]

У меня имеются 2 блока с одинаковыми классами, для уменьшения кода, но при нажатие нужно чтобы срабатывала кнопка, по которой проходит клик, у меня активная только первая

<div class="reference-body-left-item">
                <h5 class="reference-body-left-search-title">Общая информация, почему именно этот кандидат  </h5>
                <p class="reference-body-left-search-text">В сфере IT Андрей работает всю карьеру, начинал с администратора баз данных и Oracle-разработчика, но последние 6 лет занимается тестированием. Имеет техническое образование — прикладная информатика в экономике. В Альфа Банке работал в продуктовой команде, был единственным тестировщиком, потому нёс ответственность за качество продукта, за процессы тестирования внутри команды и т.д. Занимался
                  и ручным тестированием <span class="reference-body-left-dots">...</span><span class="reference-body-left-more"> Михаил Юрьевич Лермонтов – классик русской литературы, мыслитель, основоположник отечественного психологического романа, духовный преемник Александра Пушкина, умноживший и обогативший его наследие, один из самых мистических русских писателей,
                  в 16 лет предсказавший революцию, Гражданскую войну и собственную смерть, ярко проявивший себя также как художник.</span>
                </p>
                <button class="reference-body-left-search-read" onclick="readMore(event)">Читать далее</button>
              </div>
              <div class="reference-body-left-item">
                <h5 class="reference-body-left-search-title">Опыт в тестировании </h5>
                <p class="reference-body-left-p">Виды используемых автотестов.</p>
                <div class="reference-body-left-subtitle">UI:</div>
                <ul>
                  <li class="reference-body-left-li">- 2 года писал end-2-end на аналоге selenide;</li>
                  <li class="reference-body-left-li">- 1,5 года писал end-2-end на bdd фреймворке Akita (3 слоя в проекте: корневая либа акиты, либа с кастомными шагами, фича-файлы с тестами) <span class="reference-body-left-dots">...</span></li>
                 <span class="reference-body-left-more"> <li class="reference-body-left-li">- вы не должны знать ответы на все вопросы и решение всех проблем, которые могут возникнуть в процессе трудовой деятельности.</li>
                  <li class="reference-body-left-li"> - разговорные навыки пригодятся во многих жизненных и рабочих ситуациях.</li></span>
                </ul>
                <button class="reference-body-left-search-read" onclick="readMore(event);">Читать далее</button>
              </div>

function readMore(event){
  const dots = document.querySelector('.reference-body-left-dots');
  const otherText = document.querySelector('.reference-body-left-more');
  const btnRead = document.querySelector('.reference-body-left-search-read');
  let Starget = event.target;
  if(Starget.tagName == 'BUTTON'){
  if(dots.style.display === 'none'){
    dots.style.display = 'inline';
    btnRead.innerHTML = 'Читать далее';
    otherText.style.display = 'none';
  }else {
    dots.style.display = 'none';
    btnRead.innerHTML = 'Скрыть текст';
    otherText.style.display = 'block';
  }
}else return;
}

Answer 1

[Антон Неверов]

Ну вы же всё сделали уже в коде.
Нужную кнопку вы получаете в переменной
let Starget = event.target;
Достаточно переименовать её в btnRead, а то, что вы объявляете сверху удалить вовсе.

Но есть и альтернативный путь: можно построить работу от блока, в котором располагается кнопка:

function readMore(event) {
    const container = event.target.closest('.reference-body-left-item');
    
    const dots = container.querySelector('.reference-body-left-dots');
    const otherText = container.querySelector('.reference-body-left-more');
    const btnRead = container.querySelector('.reference-body-left-search-read');
    let Starget = event.target;
    
    if (Starget.tagName == 'BUTTON') {
        if (dots.style.display === 'none') {
            dots.style.display = 'inline';
            btnRead.innerHTML = 'Читать далее';
            otherText.style.display = 'none';
        } else {
            dots.style.display = 'none';
            btnRead.innerHTML = 'Скрыть текст';
            otherText.style.display = 'block';
        }
    } else return;
}

Comments

[12Vadim12]

Спасибо за ваш ответ) в первом решение вы точно подметили что btnRead, при наличие event.target бесполезен, но с тем вариантом есть проблема, в том что текст открывает, только первого item, вне зависимости по какой кнопки идет клик;
Второй же вариант, работает без проблем.

Answer 2

[Чипекве]

function readMore({ target }) {
  const item = target.closest('.reference-body-left-item');
  const ellipsis = item.querySelector('.reference-body-left-dots');
  const hiddenText = item.querySelector('.reference-body-left-more');
  
  const isHiding = target.textContent === 'Скрыть текст';
  
  target.textContent = isHiding ? 'Читать далее' : 'Скрыть текст';
  ellipsis.style.display = isHiding ? 'inline' : 'none';
  hiddenText.style.display = isHiding ? 'none' : 'inline';
}