Je suis nul en javascript
Résolu
BenjaminA2mains Messages postés 44 Statut Membre -
Bonjour,
J'ai un problème comme et pour toujours.
Je veux juste copier du contenu dans le presse-papier en javascript via un bouton et c'est tout.
Donc pour cela rien de plus simple, voici la partie js
const btnCopie = document.querySelector('.btn-copie');
btnCopie.addEventListener('click', (z) => {
navigator.clipboard.setText(z.target.previousElementSibling.innerText);
alert("Code copié !");
});
Et la partie html
<div class="code">
<p>
code
</p>
<button class="btn-copie">
<img src="./img/code.jpg"/>
</button>
</div>
Donc, en théorie quand je clique sur l'image le script va chercher l'élément dans la balise <p> appartenant à la div de class "code"
Mais rien ne se passe mdrr
Si vous avez une idée
3 réponses
-
yg_be Messages postés 23437 Date d'inscription Statut Contributeur Dernière intervention Ambassadeur 1 588
bonjour,
Ne serait-ce pas plus simple d'utiliser onclick?
https://www.delftstack.com/fr/howto/javascript/javascript-set-onclick/
-
Bonjour
Où est placé ton code js par rapport à ton html ?
Pourrais-tu montrer l'intégralité de ton code ?
-
Il est placé dans le même dossier
J'ai vérifier un peu près 154 fois le lien, je suis sûr à 100% que ça vient pas de là.
Voilà mon code html complet et mon js tu l'a déjà complet au dessus
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="color-scheme" content="light dark"> <title>Index</title> <link rel="stylesheet" href="main.css"> <link rel="icon" href=".\img\favicon.svg"> <script src="clipboard.js"></script> </head> <body> <span class="page-title" id="index">Index</span> <div> <div class="product"> <span class="title"># - 9</span> <span class="detail"><a href="#">Plus de détail</a></span> <input type="checkbox" hidden id="0"> <label class="show" for="0" tabindex="0"></label> <div class="code"> <p> 5cps </p> <button class="btn-copie"> <img src="./img/5cps.jpg"/> </button> </div> </div> </div> </body> </html>Je suis en train de m'exploser mon crâne mais comme d'hab j'ai le sentiment que ça va être un truc à la con
-
Je pense savoir quelle est la cause de ton souci en général c'est toujours la même pour les débutants...
Tu as placé l'appel à ton script javascript dans le head de ton HTML.
Le problème, c'est que ton script s'exécute avant que ta page HTML ne soit formée...
Je t'invite à déplacer l'appel de ton script juste avant la fin de ton body.
C'est d'ailleurs une bonne pratique à conserver pour tes futurs développements.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="color-scheme" content="light dark"> <title>Index</title> <link rel="stylesheet" href="main.css"> <link rel="icon" href=".\img\favicon.svg"> </head> <body> <span class="page-title" id="index">Index</span> <div> <div class="product"> <span class="title"># - 9</span> <span class="detail"><a href="#">Plus de détail</a></span> <input type="checkbox" hidden id="0"> <label class="show" for="0" tabindex="0"></label> <div class="code"> <p> 5cps </p> <button class="btn-copie"> <img src="./img/5cps.jpg"/> </button> </div> </div> </div> <script src="clipboard.js"></script> </body> </html>J'ai fait comme tu as dit, donc comme ça ⬆️
Mais ça fonctionne toujours pas ????
console.log("fichier js chargé!"); const btnCopie = document.querySelector('.btn-copie'); const img = document.querySelector('.btn-copie > img'); btnCopie.addEventListener('click', (z) => { copyClip(z.target); }); img.addEventListener('click', (z) => { copyClip(z.target.parentNode); }); function copyClip(z){ console.log(z); let p = z.previousElementSibling ; console.log(p); let text = p.textContent; console.log(text); navigator.clipboard.writeText(text); alert("Code copié !"); }
-
