Bouton Copier multiples

Boz · 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 !!!!!

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

Boz · 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

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 !!!

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

Boz · 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 !!

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

Boz · 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 !

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 !");
}

Boz · 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 !!!

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>

Forums Tout JavaScript

Bouton Copier multiples

Bouton Copier multiples

Re: Bouton Copier multiples

Re: Bouton Copier multiples

Re: Bouton Copier multiples

Re: Bouton Copier multiples

Re: Bouton Copier multiples

Re: Bouton Copier multiples

Re: Bouton Copier multiples

Re: Bouton Copier multiples

Re: Bouton Copier multiples