Problème avec java script
Résolu
jurjerie
Messages postés
29
Statut
Membre
-
jurjerie Messages postés 29 Statut Membre -
jurjerie Messages postés 29 Statut Membre -
Bonsoir,
J'ai un projet de soutenance a rendre et je dois faire le site d'une bibliothèque.
On dois faire une page avec une liste de livre, on dois pouvoir supprimer et ajouter de nouveaux livre.
Le problème ce trouve dans la function pour ajouter et supprimer.
merci d'avance pour votre aide,
----------------------------------
En vous souhaitant une bonne soirée
Bien cordialement jurjerie,
J'ai un projet de soutenance a rendre et je dois faire le site d'une bibliothèque.
On dois faire une page avec une liste de livre, on dois pouvoir supprimer et ajouter de nouveaux livre.
Le problème ce trouve dans la function pour ajouter et supprimer.
merci d'avance pour votre aide,
----------------------------------
En vous souhaitant une bonne soirée
Bien cordialement jurjerie,
A voir également:
- Problème avec java script
- Jeux java itel - Télécharger - Jeux vidéo
- Waptrick java football - Télécharger - Jeux vidéo
- Script vidéo youtube - Guide
- Eclipse java - Télécharger - Langages
- Waptrick java voiture - Télécharger - Jeux vidéo
2 réponses
Le code HTML de la page
JS :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-con" href="../assets/pictures/bubble.png">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/livres.css">
<script src="../js/index.js" defer></script>
<title>Bibliotheque</title>
</head>
<body>
<nav>
<section class="logo">
<div>
<img src="../assets/pictures/logo.png" alt="logo">
</div>
<div class="logo-name">Bibliotheque</div>
</section>
<section class="navigation">
<div>
<form id= "searchbox" method= "get" action= "accueil.html">
<input type= "text" name="result" placeholder="Recherche">
<input id= "button-submit" type="submit" value="Search">
</form>
</div>
<div>
<a href="../html/accueil.html">accueil</a>
</div>
<div>
<a href="../html/livres.html">livres</a>
</div>
<div>
<a href="../html/entreprise.html">qui sommes nous?</a>
</div>
<div>
<a href="../html/employes.html">nos employés</a>
</div>
<div>
<a href="../html/contact.html">contact</a>
</div>
</section>
</nav>
<header>
<h1>Livres</h1>
</header>
<main>
<article class="dispobooks">
<h3>Livres disponibles</h3>
<section id="livre1">
<div>Le Seigneur des Anneaux, Tome 1<input type="submit" value="Supprimer" onclick=btts1() id="bbts1" class="suplivre"/></div>
</section>
<section id="livre2">
<div>Le Seigneur des Anneaux, Tome 2<input type="submit" value="Supprimer" onclick=btts2() id="bbts2" class="suplivre"/></div>
</section>
<section id="livre3">
<div>L'art de la Guerre, Sun Tzu<input type="submit" value="Supprimer" onclick=btts3() id="bbts3" class="suplivre"/></div>
</section>
<section id="livre4">
<div>Harry Potter et l'Enfant maudit<input type="submit" value="Supprimer" onclick=btts4() id="bbts4" class="suplivre"/></div>
</section>
<section id="livre">
<!-- addLivre -->
</section>
</article>
<article class="addbooks">
<div>
<h3>Ajouter un Livre</h3>
<section>
<input id="add-book" type="text" placeholder="Ajoutez un livre">
<input id="submit-book" type="submit" value="Ajouter" onclick=bttAddLivre() />
</section>
</div>
</article>
</main>
<footer>
<!-- <div><a href="#">↑<br><span>up</span></a></div> -->
<p>© - CCR 2021 Tous droits réservés</p>
</footer>
<script href="../js/index.js"/>
</body>
</html>
JS :
function bttAddLivre(){
var affisage = document.querySelector('#addLivre');
var ElementDivDebut = '<div class="Livre'+ nombreDeLivre +'">';
const a = document.querySelector("#add-book");
var ElementText = a.value;
var ElementInput = '<input type="submit" value="Supprimer" onclick=btts('+ nombreDeLivre +') id='+"bbts"+ nombreDeLivre +' class="suplivre"/>';
var ElementDivFin = '</div>' ;
var ElementGeneral = ElementDivDebut + ElementText + ElementInput;
var sectionGeneral = document.createElement('section');
const codehtml = document.createTextNode(ElementGeneral)
sectionGeneral.appendChild(codehtml);
document.querySelector("#addLivre").appendChild(sectionGeneral)
}
Bonjour,
Commence déjà par corriger le code de ton bouton par
Tu feras la même chose sur le code de ton bouton supprimer...
ensuite, tu utilises la méthode createTextNode ... qui ne permet que de créer, comme son nom l'indique... que du text !
Pour ajouter du code html, il te faut utiliser la méthode innerHTML
Et enfin.. si tu as encore des soucis, merci de décrire précisément le souci
(ps : pense bien à regarder dans la CONSOLE javascript de ton navigateur si tu ne verrais pas des messages d'erreur...)
Commence déjà par corriger le code de ton bouton par
<input id="submit-book" type="button" value="Ajouter" onclick="bttAddLivre();" />
Tu feras la même chose sur le code de ton bouton supprimer...
ensuite, tu utilises la méthode createTextNode ... qui ne permet que de créer, comme son nom l'indique... que du text !
Pour ajouter du code html, il te faut utiliser la méthode innerHTML
Et enfin.. si tu as encore des soucis, merci de décrire précisément le souci
(ps : pense bien à regarder dans la CONSOLE javascript de ton navigateur si tu ne verrais pas des messages d'erreur...)