Je suis nul en javascript
Résolu
BenjaminA2mains Messages postés 43 Date d'inscription Statut Membre Dernière intervention -
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
- Je suis nul en javascript
- Telecharger javascript - Télécharger - Langages
- Javascript echo ✓ - Forum PHP
- La sti2d c'est nul - Forum Études / Formation High-Tech
- La filière Sti2d est elle une filière à éviter ? - Forum Études / Formation High-Tech
- Afficher un tableau javascript en html ✓ - Forum Javascript
3 réponses
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é !");
}