Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Como copiar 2 textos con javascript

JavaScript - Como copiar 2 textos con javascript

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 33
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como copiar 2 textos con javascript

Publicado por Javier (22 intervenciones) el 14/04/2022 20:03:11
Tengo este código pero no me funciona al querer copiar el segundo texto... alguien me podria ayudar, por favor???

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
 
 
<!-- inicio del texto1 -->
<div class="texto1">
<div id="textToCopy">
soy el texto 1
</div>
<br>
<button id="copyButton">Click para copiar</button> <span id="copyResult"></span>
</div>
<br>
 
<script>
 
  const answer = document.getElementById("copyResult");
const copy   = document.getElementById("copyButton");
const selection = window.getSelection();
const range = document.createRange();
const textToCopy = document.getElementById("textToCopy")
 
copy.addEventListener('click', function(e) {
    range.selectNodeContents(textToCopy);
    selection.removeAllRanges();
    selection.addRange(range);
    const successful = document.execCommand('copy');
    if(successful){
      answer.innerHTML = 'Copiado!';
    } else {
      answer.innerHTML = 'No se pudo copiar!';
    }
    window.getSelection().removeAllRanges()
});
 
</script>
 
<style>
  .texto1{
    margin-left: 120px;
  }
</style>
 
<!-- final del texto1 -->
 
<div class="texto2">
<div id="textToCopy">
soy el texto 2
</div>
<br>
<button id="copyButton1">Click para copiar</button> <span id="copyResult1"></span>
</div>
 
<script>
 
  const answer = document.getElementById("copyResult1");
const copy   = document.getElementById("copyButton1");
const selection = window.getSelection();
const range = document.createRange();
const textToCopy = document.getElementById("textToCopy1")
 
copy.addEventListener('click', function(e) {
    range.selectNodeContents(textToCopy);
    selection.removeAllRanges();
    selection.addRange(range);
    const successful = document.execCommand('copy');
    if(successful){
      answer.innerHTML = 'Copiado!';
    } else {
      answer.innerHTML = 'No se pudo copiar!';
    }
    window.getSelection().removeAllRanges()
});
 
</script>
 
<style>
  .texto2{
    margin-left: 120px;
  }
</style>
 
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Como copiar 2 textos con javascript

Publicado por Ivan (118 intervenciones) el 14/04/2022 21:13:00
Hola,

hay varios errores en tu código:

1 - No se pueden definir clases css en el <body>, deben declararse en el <head>, y una clase se puede utilizar para dar formato a cualquier elemento que la asignes

2 - Declaras las mismas constantes 2 veces por eso sólo funcionan con el primer valor

3 - Duplicas la función del evento "clic" cuando una función precisamente es para ser reutilizada las veces que haga falta

Así que reutilizando tu código, lo he optimizado para seguir el mismo esquema que usas de copiar el texto de un elemento ID y mostrar una respuesta en otro elemento ID. He creando una función general donde envías los dos ID y simplemente debes asignarla al evento onclick de cada botón que quieras utilizar para copiar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8">
  <title>Copiar textos</title>
 
  <style>
    .texto { margin-left: 120px; }
  </style>
 
  <script>
    function copyText(idElement, idResult) {
      const range = document.createRange();
      const selection = window.getSelection();
      const answer = document.getElementById(idResult);
      const textToCopy = document.getElementById(idElement);
      range.selectNodeContents(textToCopy);
      selection.removeAllRanges();
      selection.addRange(range);
 
      const successful = document.execCommand('copy');
 
      if (successful) answer.innerHTML = 'Texto copiado !';
      else answer.innerHTML = 'No se pudo copiar el texto !';
 
      window.getSelection().removeAllRanges()
 
    }
  </script>
</head>
 
<body>
<div class="texto">
  <div id="textToCopy1">soy el texto 1</div>
  <button onclick="copyText('textToCopy1', 'copyResult1')">Click para copiar</button> <span id="copyResult1"></span>
</div>
<br>
<div class="texto">
  <div id="textToCopy2">soy el texto 2</div>
  <button onclick="copyText('textToCopy2', 'copyResult2')">Click para copiar</button> <span id="copyResult2"></span>
</div>
 
</body>
</html>

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar