Bouton Copier multiples

Pour toutes les discussions javascript, jQuery et autres frameworks
Boz
Messages : 10
Enregistré le : 05 oct. 2022, 10:34

Bouton Copier multiples

Message par Boz » 05 oct. 2022, 11:05

Bonjour,
Je ne suis qu'un humble intégrateur de JavaScript, et je m'arrache les cheveux :
Je voudrais mettre plusieurs boutons "copier" (pour copier un texte au choix) sur une page web.
J'ai utilisé plusieurs scripts, et j'ai toujours le même problème : Les boutons renvoient tous à la copie du Textarea n°1 au lieu de copier le texte que je cherche à associer :

Mon HTML :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<HTML>
   <HEAD>
      <TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css"> 
   </HEAD>
   <BODY>


    <textarea id="textArea"	rows="4" cols="33";>
Text 1</textarea>
    <button onclick="copyToClipBoard()">Copier</button>
    <script src="a.js"></script>


</br>


    <textarea id="textArea"	rows="4" cols="20";>
Text 2</textarea>
    <button onclick="copyToClipBoard()">Copier</button>
    <script src="a.js"></script>

   </BODY>
</HTML>
Mon JavaScript :

Code : Tout sélectionner

function copyToClipBoard() {

    var content = document.getElementById('textArea');
    
    content.select();
    document.execCommand('copy');

    alert("Copie !");
}
J'ai essayé de Changer l'id de la TextArea.
J'ai essayé de créer un script par bouton...
Mais rien n'y fait, c'est toujours le premier textArea qui est copié.

Quelqu'un aurait une idée pour moi ?
Désolé pour le niveau de la question :?

Merci beaucoup à tous !!!!!

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Bouton Copier multiples

Message par webmaster » 05 oct. 2022, 11:29

Bonjour

Cela semble logique, document.getElementById('textArea') retourne le premier élément de la page
Il faut un identifiant unique par textarea
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Boz
Messages : 10
Enregistré le : 05 oct. 2022, 10:34

Re: Bouton Copier multiples

Message par Boz » 05 oct. 2022, 12:13

Merci beaucoup,
J'ai essayé de modifier donc par ceci :

JavaScript :

Code : Tout sélectionner

function copyToClipBoard() {

    var content1 = document.getElementById('content1');
    var content2 = document.getElementById('content2');
    
    content.select();
    document.execCommand('copy');

    alert("Copie !");
}
HTML :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css"> 
   </HEAD>
   <BODY>


    <textarea id="content1"	rows="4" cols="33";>
Text 1</textarea>
    <button onclick="copyToClipBoard()">Copier</button>
    <script src="a.js"></script>


</br>


    <textarea id="content2"	rows="4" cols="20";>
Text 2</textarea>
    <button onclick="copyToClipBoard()">Copier</button>
    <script src="a.js"></script>

   </BODY>
</HTML>
Et ça ne fonctionne plus du tout :x
J'ai créé une variable pas Id de TextArea, mais j'arrive pas à les associer :|

Une idée pour moi ?
Dsl.. Je suis une bille en JS

Merci encore !!!

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Bouton Copier multiples

Message par webmaster » 05 oct. 2022, 14:06

Il faut simplement passer en paramètre le numero de textarea

Code : Tout sélectionner

function copyToClipBoard(num) {
    var content = document.getElementById('content'+num);
    content.select();
    document.execCommand('copy');
    alert("Copie !");
}
Et à l'appel sur chaque bouton on passe le bon numéro

Code : Tout sélectionner

    <button onclick="copyToClipBoard(1)">Copier</button>
Ca devrait fonctionner
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Boz
Messages : 10
Enregistré le : 05 oct. 2022, 10:34

Re: Bouton Copier multiples

Message par Boz » 05 oct. 2022, 14:27

J'ai modifié :
Mon JS :

Code : Tout sélectionner

function copyToClipBoard(num) {
    var content = document.getElementById('content'+1);
    var content = document.getElementById('content'+2);
    content.select();
    document.execCommand('copy');
    alert("Copie !");
}
Mon HTML :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<HTML>
   <HEAD>
      <TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css"> 
   </HEAD>
   <BODY>
    <textarea id="content1"	rows="4" cols="33";>
Text 1</textarea>
    <button onclick="copyToClipBoard(1)">Copier</button>
    <script src="a.js"></script>
</br>
    <textarea id="content2"	rows="4" cols="20";>
Text 2</textarea>
    <button onclick="copyToClipBoard(2)">Copier</button>
    <script src="a.js"></script>

   </BODY>
</HTML>
Et maintenant, il copie le "Texte 2" sur les deux boutons "Copier"...

Une idée pour moi ?

Merci beaucoup pour tes réponses !!

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Bouton Copier multiples

Message par webmaster » 05 oct. 2022, 14:29

La fonction c'est ca :

Code : Tout sélectionner

function copyToClipBoard(num) {
    var content = document.getElementById('content'+num);
    content.select();
    document.execCommand('copy');
    alert("Copie !");
}
le code reprend "num" qui est passé dans les parentheses au clic du bouton
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Boz
Messages : 10
Enregistré le : 05 oct. 2022, 10:34

Re: Bouton Copier multiples

Message par Boz » 05 oct. 2022, 16:36

J'ai mis le chiffre entre les parenthèses du bouton.
Et ça ne fonctionne pas...

En JS, j'ai :

Code : Tout sélectionner

function copyToClipBoard(1) {
    var content = document.getElementById('content'+1);
    content.select();
    document.execCommand('copy');
    alert("Copie !");
}
function copyToClipBoard(2) {
    var content = document.getElementById('content'+2);
    content.select();
    document.execCommand('copy');
    alert("Copie !");
}
et en HTMH :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<HTML>
   <HEAD>
      <TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css"> 
   </HEAD>
   <BODY>

    <textarea id="content"	rows="4" cols="33";>
Text 1</textarea>
    <button onclick="copyToClipBoard(1)">Copier</button>
    <script src="a.js"></script>
</br>
    <textarea id="content"	rows="4" cols="20";>
Text 2</textarea>
    <button onclick="copyToClipBoard(2)">Copier</button>
    <script src="a.js"></script>

   </BODY>
</HTML>
Dans le JS, j'ai 2 boutons.
Dans le HTML, id=textarea, c'est correct, ou je dois ajouter 1 ou +1 ?

Pour l'instant, rien ne se copie...

Merci encore à toi !

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Bouton Copier multiples

Message par webmaster » 06 oct. 2022, 09:04

pourquoi tu changes le code que je te donne
la fonction c'est ca et uniquement ca:

Code : Tout sélectionner

function copyToClipBoard(num) {
    var content = document.getElementById('content'+num);
    content.select();
    document.execCommand('copy');
    alert("Copie !");
}
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Boz
Messages : 10
Enregistré le : 05 oct. 2022, 10:34

Re: Bouton Copier multiples

Message par Boz » 06 oct. 2022, 12:36

Désolé.
J'ai donc laissé le code JS sans toucher à rien.

Côté HTML :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<HTML>
   <HEAD>
      <TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css"> 
   </HEAD>
   <BODY>
    <textarea id="content"	rows="4" cols="33";>
Text 1</textarea>
    <button onclick="copyToClipBoard(num)">Copier</button>
</br>
    <textarea id="content"	rows="4" cols="20";>
Text 2</textarea>
    <button onclick="copyToClipBoard(num)">Copier</button>
    <script src="a.js"></script>
   </BODY>
</HTML>
Pour l'instant ça ne copie rien...
J'ai essaye l'écriture : copyToClipBoard(num)
J'ai essaye l'écriture : copyToClipBoard(1)
J'ai essaye l'écriture : copyToClipBoard(+1)
J'ai essaye l'écriture : copyToClipBoard(num+1)

Aucun ne fonctionne.
De quelle façon faut-il lier le bouton au texte ?

Merci beaucoup à toi pour ta patience !!!

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Bouton Copier multiples

Message par webmaster » 06 oct. 2022, 17:29

Ok, c'est plus simple avec tout le code
Voici ce que ca donne :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<HTML>
   <HEAD>
      <TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css"> 
   </HEAD>
   <BODY>
    <script>
        function copyToClipBoard(num) {
            var content = document.getElementById('content'+num);
            content.select();
            document.execCommand('copy');
            alert("Copie !");
        }
        
    </script>
    <textarea id="content1"	rows="4" cols="33";>
Text 1</textarea>
    <button onclick="copyToClipBoard(1)">Copier</button>
</br>
    <textarea id="content2"	rows="4" cols="20";>
Text 2</textarea>
    <button onclick="copyToClipBoard(2)">Copier</button>
    <script src="a.js"></script>
   </BODY>
</HTML>
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre