Копирование текста нажатием на блок

Question

Сегодня уже был вопрос на эту тему, я попытался найти решение и не смог. Суть в том, что я переделал верстку из исходного вопроса, блоки получил делегированием, копирование хотел получить через цикл for, но у меня копируется цвет только из первого блока. В чем у меня ошибка? Знаю, что на исходный вопрос уже дали ответ, но мне интересна именно моя ошибка.
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="block-palitra">                   
        <button class="block-palitra1" style="background-color: #f0f5f9">
            <input class="blocking" value="#f0f5f9"></input>
        </button>
        <button class="block-palitra2" style="background-color: #c9d6df">
            <input class="blocking" value="#c9d6df"></input>
        </button>
        <button class="block-palitra3" style="background-color: #52616b">
            <input class="blocking" value="#52616b"></input>
        </button>
        <button class="block-palitra4" style="background-color: #1e2022">
            <input class="blocking" value="#1e2022"></input>
        </button>
    </div>
</body>
</html>

CSS:

.block-palitra {
    min-height: 240px;
    margin: 10px;
    box-shadow: 0 0 2px #2c2c2c;
    border-radius: 5px;
}

.block-palitra1{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    min-height: 90px;
    padding: 2px 10px;
    width: 100%;
}
.block-palitra2{
    min-height: 70px;
    padding: 2px 10px;
    width: 100%;
}
.block-palitra3{
    min-height: 50px;
    padding: 2px 10px;
    width: 100%;
}
.block-palitra4{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    min-height: 30px;
    padding: 2px 10px;
    width: 100%;
}
.blocking{
    background: rgba(0,0,0,0.3);
    color: white;
    display:none;
    text-align: center;
    max-width: 120px;
    border-radius: 5px;
}
.block-palitra1:hover .blocking{
    display:block;
}
.block-palitra2:hover .blocking{
    display:block;
}
.block-palitra3:hover .blocking{
    display:block;
}
.block-palitra4:hover .blocking{
    display:block;
}
.nav-link-transition{
    transition: opacity 10s linear;
}

JS:

const blockPalitra = document.querySelector('.block-palitra');
const text = document.querySelectorAll('.blocking');
//console.log(text);
//console.log(text[0]);

blockPalitra.addEventListener('click', (e) => {
    for (let i = 0; i < text.length; i++) {
        if (e.target.tagName == 'BUTTON') {
            text[i].select();
            document.execCommand("copy");
            alert('Цвет скопирован в буфер обмена!');
            return;
        }
    } 
});

Answer 1

Честно сказать я не понял зачем тут цикл. Я посмотрел делегирование тут: https://learn.javascript.ru/event-delegation и попробовал примерно прикинуть. Получилось так:

const blockPalitra = document.querySelector('.block-palitra');

blockPalitra.addEventListener('click', (e) => {
  let btn = e.target.closest('BUTTON');

  if (!btn)
    return;

  let textInput = btn.querySelector('.blocking');
  
  textInput.select();
  console.log(textInput);
  document.execCommand("copy");
});

.block-palitra {
  min-height: 240px;
  margin: 10px;
  box-shadow: 0 0 2px #2c2c2c;
  border-radius: 5px;
}

.block-palitra1 {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  min-height: 90px;
  padding: 2px 10px;
  width: 100%;
}

.block-palitra2 {
  min-height: 70px;
  padding: 2px 10px;
  width: 100%;
}

.block-palitra3 {
  min-height: 50px;
  padding: 2px 10px;
  width: 100%;
}

.block-palitra4 {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  min-height: 30px;
  padding: 2px 10px;
  width: 100%;
}

.blocking {
  background: rgba(0, 0, 0, 0.3);
  color: white;
  display: none;
  text-align: center;
  max-width: 120px;
  border-radius: 5px;
}

.block-palitra1:hover .blocking {
  display: block;
}

.block-palitra2:hover .blocking {
  display: block;
}

.block-palitra3:hover .blocking {
  display: block;
}

.block-palitra4:hover .blocking {
  display: block;
}

.nav-link-transition {
  transition: opacity 10s linear;
}

<div class="block-palitra">
  <button class="block-palitra1" style="background-color: #f0f5f9">
            <input class="blocking" value="#f0f5f9"></input>
        </button>
  <button class="block-palitra2" style="background-color: #c9d6df">
            <input class="blocking" value="#c9d6df"></input>
        </button>
  <button class="block-palitra3" style="background-color: #52616b">
            <input class="blocking" value="#52616b"></input>
        </button>
  <button class="block-palitra4" style="background-color: #1e2022">
            <input class="blocking" value="#1e2022"></input>
        </button>
</div>

БЛОГ НА HUSL

Копирование текста нажатием на блок

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