Fonctions

4 min 3 exercices Niveau 5

Retour au cours

Exercice 1

Exercice 2

Exercice 3

Énoncé

Soit le code HTML suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <h1>Liste de courses </h1>

    <section>
        <h2>Ajouter un élément</h2>
        <form id="addItem">
            <input type="text" name="newItem" id="newItem">
            <input type="submit" value="Envoyer">
        </form>
    </section>

    <section>
        <h1>Ma liste : </h1>
        <ul class="list">
            <!-- votre code-->
        </ul>
    </section>

    <script type="text/javascript">
        let form = document.querySelector('#addItem');
        form.addEventListener("submit", function(event) {
            event.preventDefault();
            addItem();
        });

        function addItem() {
            // Votre code

        }
    </script>
</body>
</html>

L’exercice consiste en l’implémentation de la méthode addItem(). Le code fourni fait en sorte que cette fonction soit déclenchée à chaque fois que le formulaire présent au-dessus est envoyé.

La fonction devra effectuer les opérations suivantes :

récupérer le contenu du champs texte dans le formulaire
ajouter ce contenu dans une balise <li> au sein de l’élément ```

ul>``` - vider le contenu du champs texte du formulaire

__Attention__ : N’oubliez pas d’ajouter une vérification de telle sorte à ce que l’on ne puisse pas rajouter un élément vide !

Contraintes

Ne pas modifier le code HTML, utiliser uniquement du JavaScript.
Le JavaScript doit être inséré dans le même fichier HTML, grâce à la balise “script”.

Résultats attendus

Le formulaire est fonctionnel, l’ajout d’éléments s’effectue correctement et il n’est pas possible d’ajouter un élément “vide” (Le champ texte doit forcément contenir au moins 1 caractère afin de permettre l’ajout au sein de la liste du dessous).

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !