Вывести текст из каждой textarea в тег pre

Question

нужно вывести текст из каждой textarea в соответствующий тег pre. Че то вроде получилось, но текст выводится не в PRE а в BUTTON. Вот рабочий пример (javascript):

function txt(){
    
    document.querySelectorAll('.buttons').forEach(btns => {
        btns.addEventListener('click', function () {
            document.querySelectorAll('.pre').forEach(pre => {
                this.closest('.block').querySelectorAll('.precode').forEach(precode => {
                    //Отправка формы
                    this.innerHTML = precode.value;
                });
            });
        });
    });
 
}

.pre {border: 1px solid black; height: 20px}

<div class="block"><br>
    <textarea class="precode" onkeyup="txt()" name="text"></textarea>
    <br><pre class="pre"></pre>  
    <button class="buttons" onclick="return false">Вывести</button>
       
</div>
<div class="block"><br>
    <textarea class="precode" onkeyup="txt()" name="text"></textarea>
    <br><pre class="pre"></pre>
    <button class="buttons" id="button" onclick="return false">Вывести</button>
       
</div>
<div class="block"><br>
    <textarea class="precode" onkeyup="txt()" name="text"></textarea>
    <br><pre class="pre"></pre>
    <button class="buttons" onclick="return false">Вывести</button>
       
</div>

Answer 1

Немного поправил, вы просто выбирали не тот элемент

function txt(){
document.querySelectorAll('.buttons').forEach(btns => {
    btns.addEventListener('click', function () {
        var precode = this.closest('.block').querySelector('.precode');
        var pre = this.closest('.block').querySelector('.pre');
        pre.innerHTML = precode.value;
    });
});
}

.pre {border: 1px solid black; height: 20px}

<div class="block"><br>
    <textarea class="precode" onkeyup="txt()" name="text"></textarea>
    <br><pre class="pre"></pre>  
    <button class="buttons" onclick="return false">Вывести</button>
       
</div>
<div class="block"><br>
    <textarea class="precode" onkeyup="txt()" name="text"></textarea>
    <br><pre class="pre"></pre>
    <button class="buttons" id="button" onclick="return false">Вывести</button>
       
</div>
<div class="block"><br>
    <textarea class="precode" onkeyup="txt()" name="text"></textarea>
    <br><pre class="pre"></pre>
    <button class="buttons" onclick="return false">Вывести</button>
       
</div>

Answer 2

Вообще у вас неверных подход..

У вас есть код, который обходит по всех .buttons и вешает на них addEventListener.
Данный код обёрнут в функцию, которая отрабатывает при нажатии клавиши в textarea.

Т.е. при каждом нажатии вы вешаете ивент снова.. Зачем?

Варианта два, либо не оборачиваете код:

document.querySelectorAll('.buttons').forEach(btn => { // проходим по всем кнопкам
  btn.addEventListener('click', event => { // на каждую вешаем ивент на клик
    event.preventDefault(); // отключаем стандартное поведение кнопки
    
    const block = btn.closest('.block'); // обращаемся к родительскому `.block`
    const textareaValue = block.querySelector('.precode').value; // от него к `.precode` и получаем его value
    const pre = block.querySelector('.pre'); // от `.block` к `.pre`
    
    pre.textContent = textareaValue; // для `.pre` устанавливаем текст из `textareaValue`
    
    return false; // это аналог `onClick="return false"` который ставился каждому button
  });
});

.pre {
  border: 1px solid black;
  height: 20px
}

<div class="block"><br>
  <textarea class="precode" name="text"></textarea><br>
  <pre class="pre"></pre>
  <button class="buttons">Вывести</button>
</div>
<br>
<div class="block">
  <textarea class="precode" name="text"></textarea><br>
  <pre class="pre"></pre>
  <button class="buttons">Вывести</button>
</div>
<br>
<div class="block">
  <textarea class="precode" name="text"></textarea><br>
  <pre class="pre"></pre>
  <button class="buttons">Вывести</button>
</div>

Либо используете функцию, но она уже будет выглядеть иначе:

function txt(elem) { // создаём функцию, параметром передам кнопку, по которой произошло нажатие
  const block = elem.closest('.block'); // обращаемся к родительскому `.block`
  const textareaValue = block.querySelector('.precode').value; // от него к `.precode` и получаем его value
  const pre = block.querySelector('.pre'); // от `.block` к `.pre`
    
  pre.textContent = textareaValue; // для `.pre` устанавливаем текст из `textareaValue`
    
  return false; // это аналог `onClick="return false"` который ставился каждому button
}

.pre {
  border: 1px solid black;
  height: 20px
}

<div class="block"><br>
  <textarea class="precode" name="text"></textarea><br>
  <pre class="pre"></pre>
  <button class="buttons" onclick="txt(this)">Вывести</button>
</div>
<br>
<div class="block">
  <textarea class="precode" name="text"></textarea><br>
  <pre class="pre"></pre>
  <button class="buttons" onclick="txt(this)">Вывести</button>
</div>
<br>
<div class="block">
  <textarea class="precode" name="text"></textarea><br>
  <pre class="pre"></pre>
  <button class="buttons" onclick="txt(this)">Вывести</button>
</div>

Вариант когда кнопка одна:

const blocks = document.querySelectorAll('.block'); // берём все `.block`

document.querySelector('.button-all').addEventListener('click', event => { // на каждую вешаем ивент на клик
  event.preventDefault(); // отключаем стандартное поведение кнопки

  blocks.forEach(block => { // Проходим по всем `.block`
    const textareaValue = block.querySelector('.precode').value; // от него к `.precode` и получаем его value
    const pre = block.querySelector('.pre'); // от `.block` к `.pre`

    pre.textContent = textareaValue; // для `.pre` устанавливаем текст из `textareaValue`
  })

  return false; // это аналог `onClick="return false"` который ставился каждому button
});

.pre {
  border: 1px solid black;
  height: 20px
}

<div class="block"><br>
  <textarea class="precode" name="text"></textarea><br>
  <pre class="pre"></pre>
</div>
<br>
<div class="block">
  <textarea class="precode" name="text"></textarea><br>
  <pre class="pre"></pre>
</div>
<br>
<div class="block">
  <textarea class="precode" name="text"></textarea><br>
  <pre class="pre"></pre>
</div>

<button class="button-all">Вывести все</button>

БЛОГ НА HUSL

Вывести текст из каждой textarea в тег pre

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