Page 1 sur 2

Bouton Copier multiples

Posté : 05 oct. 2022, 11:05
par Boz
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 !!!!!

Re: Bouton Copier multiples

Posté : 05 oct. 2022, 11:29
par webmaster
Bonjour

Cela semble logique, document.getElementById('textArea') retourne le premier élément de la page
Il faut un identifiant unique par textarea

Re: Bouton Copier multiples

Posté : 05 oct. 2022, 12:13
par Boz
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 !!!

Re: Bouton Copier multiples

Posté : 05 oct. 2022, 14:06
par webmaster
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

Re: Bouton Copier multiples

Posté : 05 oct. 2022, 14:27
par Boz
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 !!

Re: Bouton Copier multiples

Posté : 05 oct. 2022, 14:29
par webmaster
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

Re: Bouton Copier multiples

Posté : 05 oct. 2022, 16:36
par Boz
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 !

Re: Bouton Copier multiples

Posté : 06 oct. 2022, 09:04
par webmaster
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 !");
}

Re: Bouton Copier multiples

Posté : 06 oct. 2022, 12:36
par Boz
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 !!!

Re: Bouton Copier multiples

Posté : 06 oct. 2022, 17:29
par webmaster
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>