Fonctions
É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 !