Как брать текст который находится внутри дива

Question

У меня есть div в котором есть элемент p

<div class="btn">Скопировать
       <p style="display: none;" class="getlink">тут будет лежать ссылка</p>
</div>

мне нужно чтобы при нажатии на див class btn копировался в буфер обмена текст который находится внутри элемента "p"

Проблема в том что я хочу продублировать этот код и он будет выглядеть в таком виде:

<div class="btn">Скопировать
       <p style="display: none;" class="getlink">тут будет лежать ссылка 1</p>
</div>
<div class="btn">Скопировать
       <p style="display: none;" class="getlink">тут будет лежать ссылка 2</p>
</div>
<div class="btn">Скопировать
       <p style="display: none;" class="getlink">тут будет лежать ссылка 3</p>
</div>

мне нужно чтобы скрипт на жс при нажатии на Скопировать aka .btn брал ссылку которая находится в его детеныше "p"

если есть вариант как это сделать через data-title я буду благодарен ибо сам не понимаю как это реализовать

Answer 1

Может вам стоит посмотреть в сторону id?

function getLinkById(id) {
  console.log(document.getElementById(id).textContent)
}

.btn {
  width: 150px;
  height: 20px;
  border-radius: 5px;
  background-color: #80ab99;
  text-align: center;
  cursor: pointer;
  margin: 10px;
}

<div onclick="getLinkById(1)" class="btn">Скопировать
  <p id="1" style="display: none;" class="getlink">https://vk.com/</p>
</div>

<div onclick="getLinkById(2)" class="btn">Скопировать
  <p id="2" style="display: none;" class="getlink">https://od.com/</p>
</div>

<div onclick="getLinkById(3)" class="btn">Скопировать
  <p id="3" style="display: none;" class="getlink">https://ugreen.ru/</p>
</div>

Answer 2

Добраться можно так

let btns = [...$(".btn")].forEach(btn => btn.addEventListener("click", (event)=> console.log($(btn).find("p").text())));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">Скопировать
       <p style="display: none;" class="getlink">тут будет лежать ссылка 1</p>
</div>
<div class="btn">Скопировать
       <p style="display: none;" class="getlink">тут будет лежать ссылка 2</p>
</div>
<div class="btn">Скопировать
       <p style="display: none;" class="getlink">тут будет лежать ссылка 3</p>
</div>

БЛОГ НА HUSL

Как брать текст который находится внутри дива

Ответы (2 шт):