Problème avec java script

Résolu/Fermé

jurjerie Messages postés 28 Date d'inscription mercredi 24 avril 2019 Statut Membre Dernière intervention 19 août 2023 - 24 nov. 2021 à 16:51
jurjerie Messages postés 28 Date d'inscription mercredi 24 avril 2019 Statut Membre Dernière intervention 19 août 2023 - 25 nov. 2021 à 19:15

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,

A voir également:

Problème avec java script
Waptrick java football - Télécharger - Jeux vidéo
Script vidéo youtube - Guide
Jeux java itel football - Télécharger - Jeux vidéo
Java apk - Télécharger - Langages
Java décompiler - Télécharger - Langages

2 réponses

Réponse 1 / 2

jurjerie Messages postés 28 Date d'inscription mercredi 24 avril 2019 Statut Membre Dernière intervention 19 août 2023 4
24 nov. 2021 à 16:51

Le code HTML de la page

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

Réponse 2 / 2

jordane45 Messages postés 38321 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 1 décembre 2024 4 707
24 nov. 2021 à 22:43

Bonjour,

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...)

jurjerie Messages postés 28 Date d'inscription mercredi 24 avril 2019 Statut Membre Dernière intervention 19 août 2023 4
25 nov. 2021 à 19:15

merci pour ta réponse tout fonctionne mtn,

bonne soirée à toi

cordialement Jurjerie

Discussions similaires

Où télécharger des jeux java gratuits ?

telechargement gratuit de jeux pour telephone

Téléchargement de la Bible en français

Télécharger des jeux Java ?

telecharger jeux java