JQuery onclick функция копирования и вставки

Я пытаюсь скопировать текст из текстового поля в текстовое поле 1 при щелчке тега привязки 1. Он работает нормально. Как я могу также создать тег привязки 2, который копирует текст из текстового поля в текстовое поле 2. (Ссылка JSFiddle)

<textarea id = "textarea" placeholder = "text"></textarea>
<a onclick = "fn_copy();">target </a>
<a>target 2 </a>
<textarea id = "target_1"></textarea>
<textarea id = "target_2"></textarea>

<script>
function fn_copy()
{
    var temp = document.getElementById("textarea").value;
    if (temp != "")
    {
        document.getElementById("target_1").value = temp;
    }
    else
        alert("Text is Empty");
    }
</script>

javascript

28.10.2018 04:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

417

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Почему бы не расширить вашу функцию так, чтобы она принимала параметры для элементов, которые вы хотите скопировать.

  function fn_copy(from, to) {
    var temp = document.getElementById(from).value;
    if (temp != "") {
      document.getElementById(to).value = temp;
    } else {
      alert("Text is Empty");
    }
    return false;
  }

И измененная разметка

<textarea id = "textarea" placeholder = "text"></textarea>
<a onclick = "fn_copy('textarea','target_1');">target </a>
<a onclick = "fn_copy('textarea','target_2');">target 2 </a>
<textarea id = "target_1"></textarea>
<textarea id = "target_2"></textarea>

Скрипка здесь

28.10.2018 04:15

Ответ принят как подходящий

Вот рабочий пример:

<!DOCTYPE html>
<html>
<script type = "text/javascript">
function fn_copy(data)
{
    var temp = document.getElementById("textarea").value;
    if (temp != "")
    {
        document.getElementById("target_"+data).value = temp;
    }
    else
        alert("Text is Empty");
    }
</script>
<body>
<textarea id = "textarea" placeholder = "text"></textarea>
<a onclick = "fn_copy(1);">target </a>
<a onclick = "fn_copy(2);">target 2</a>
<textarea id = "target_1"></textarea>
<textarea id = "target_2"></textarea>



</body>
</html>

Спасибо. Работал как шарм!

— 28.10.2018 06:04

28.10.2018 04:15

Вы можете передать параметр функции fn_copy со значением id textarea

function fn_copy(id)
{
    var temp = document.getElementById("textarea").value;
    if (temp != "")
    {
       document.getElementById(id).value = temp;
    }
    else
    alert("Text is Empty");
 }

 <textarea id = "textarea" placeholder = "text"></textarea>
 
 
<a onclick = "fn_copy('target_1');">target 1</a>
<a onclick = "fn_copy('target_2');">target 2</a>

<textarea  id = "target_1"></textarea>
<textarea  id = "target_2"></textarea>

28.10.2018 04:16

Оберните все это в тег `<form>`

Добавьте атрибут target к каждой ссылке и присвойте каждое значение атрибуту #id из <textarea>. Краткий синтаксис, используемый для доступа к <form> и <textarea>s, обеспечивается HTMLFormControlsCollection. Шаблон Делегирование событий использовался для обработки события щелчка только с одним обработчиком события на <form> вместо обработчика события onclick на каждом <a>. Если родительский элемент обрабатывает событие щелчка, все дочерние элементы и любые динамически добавляемые элементы обрабатываются одним обработчиком.

Демо

var form = document.forms[0];
var ui = form.elements;
form.onclick = fnCopy;

function fnCopy(e) {
  var tgt = e.target;
  var txt = ui.textarea.value;
  if (tgt.tagName === 'A' && txt.length > 0) {
    var textTo = tgt.target;
    document.querySelector('#' + textTo).value = txt;
  } else if (tgt.tagName === 'A' && txt.length < 1) {
    alert('No text available');
  } else {
    return false;
  }
}

<form id='form'>
  <textarea id = "textarea" placeholder = "Enter text"></textarea><br>
  <a href='#/' target='target1'>target 1</a>
  <a href='#/' target='target2'>target 2</a><br>
  <textarea id = "target1" placeholder='target1'></textarea><br>
  <textarea id = "target2" placeholder='target2'></textarea>
</form>

28.10.2018 04:39