主页 / 问题 / 1560523
Accepted
Hunter o_0
Asked:2024-01-07 15:17:41 +0000 UTC2024-01-07 15:17:41 +0000 UTC

将每个文本区域的文本输出到预标记

  • 772

您需要将每个文本区域的文本输出到相应的预标记。有些东西似乎起作用了，但文本不是显示在 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>

javascript

2 个回答

  1. Best Answer

    更正一下，您只是选择了错误的元素

    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>

    • 0

  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>

    • 0

相关问题