Exercices DOM
Exercice 1 : Changer le Contenu d’un Élement
Instructions :
- Créez un fichier HTML avec un élément
<p>ayant un id="texte". - Créez une fonction en JavaScript qui, à l’aide de document.getElementById(), modifie le texte du paragraphe lorsque la page est chargée.
Cliquez ici pour voir la réponse
Voici une possible solution :
<p id="texte">Texte original</p>
document.getElementById("texte").innerText = "Texte modifié avec JavaScript !";
Exercice 2 : Modifier la Couleur d’un Bouton au Clic
Objectif : Modifier le style CSS d’un bouton lorsqu’il est cliqué.
Instructions : Modifier le style CSS d’un bouton lorsqu’il est cliqué.
Cliquez ici pour voir la réponse
Voici une possible solution :
<button id="monBouton">Cliquez-moi</button>
document.getElementById("monBouton").addEventListener("click", function() {
this.style.backgroundColor = "blue";
});
Exercice 3 : Afficher du Contenu Dynamique dans une Liste
Objectif : Ajouter un nouvel élément de liste dans une balise <ul> avec JavaScript.
Instructions : Modifier le style CSS d’un bouton lorsqu’il est cliqué.
- Créez une liste
<ul>vide dans le fichier HTML. - Utilisez JavaScript pour ajouter un nouvel élément
<li>à cette liste lorsque la page est chargée.
Cliquez ici pour voir la réponse
Voici une possible solution :
<ul id="maListe"></ul>
let nouvelElement = document.createElement("li");
nouvelElement.innerText = "Nouvel élément ajouté avec JavaScript";
document.getElementById("maListe").appendChild(nouvelElement);
Exercice 4 : Masquer et Afficher un Élément
Objectif : Permettre à un utilisateur de masquer ou afficher un élément avec un bouton.
Instructions : Modifier le style CSS d’un bouton lorsqu’il est cliqué.
- Créez un élément
<p>et un bouton dans votre fichier HTML. - Utilisez JavaScript pour masquer ou afficher le paragraphe lorsque l’utilisateur clique sur le bouton.
Cliquez ici pour voir la réponse
Voici une possible solution :
<p id="texte">Ce texte peut être masqué ou affiché.</p>
<button id="toggleButton">Masquer / Afficher</button>
document.getElementById("toggleButton").addEventListener("click", function() {
let texte = document.getElementById("texte");
if (texte.style.display === "none") {
texte.style.display = "block";
} else {
texte.style.display = "none";
}
});
Exercice 5 : Compteur de Clics
Objectif : Créer un compteur qui augmente chaque fois qu’un bouton est cliqué.
Instructions : Modifier le style CSS d’un bouton lorsqu’il est cliqué.
- Créez un bouton et un élément
<p>pour afficher le compteur. - Utilisez JavaScript pour incrémenter et afficher le nombre de clics chaque fois que l’utilisateur clique sur le bouton.
Cliquez ici pour voir la réponse
Voici une possible solution :
<p>Nombre de clics : <span id="compteur">0</span></p>
<button id="bouton">Cliquez-moi</button>
let compteur = 0;
document.getElementById("bouton").addEventListener("click", function() {
compteur++;
document.getElementById("compteur").innerText = compteur;
});
Exercice 6 : Ajouter un Texte via un Champ de Saisie
Objectif : Créer un formulaire qui permet à l’utilisateur d’ajouter du texte à un élément HTML.
Instructions : Modifier le style CSS d’un bouton lorsqu’il est cliqué.
- Créez un champ de saisie (
<input>) et un bouton dans le fichier HTML. - Utilisez JavaScript pour récupérer la valeur saisie et l’ajouter dans un paragraphe lorsque l’utilisateur clique sur le bouton.
Cliquez ici pour voir la réponse
Voici une possible solution :
<input type="text" id="saisie" placeholder="Entrez un texte">
<button id="ajouterTexte">Ajouter</button>
<p id="resultat"></p>
let compteur = 0;
document.getElementById("ajouterTexte").addEventListener("click", function() {
let texteSaisi = document.getElementById("saisie").value;
document.getElementById("resultat").innerText = texteSaisi;
});
Exercice 7 : Changer la Taille de la Police au Clic
Objectif : Créer un formulaire qui permet à l’utilisateur d’ajouter du texte à un élément HTML.
Instructions : Modifier la taille de la police d’un texte lorsqu’un bouton est cliqué.
- Créez un paragraphe et deux boutons : un pour augmenter et un autre pour diminuer la taille du texte.
- Utilisez JavaScript pour modifier dynamiquement la taille de la police du paragraphe.
Cliquez ici pour voir la réponse
Voici une possible solution :
<p id="texte">Ce texte va changer de taille.</p>
<button id="augmenter">Augmenter la taille</button>
<button id="diminuer">Diminuer la taille</button>
let taille = 16;
document.getElementById("augmenter").addEventListener("click", function() {
taille += 2;
document.getElementById("texte").style.fontSize = taille + "px";
});
document.getElementById("diminuer").addEventListener("click", function() {
taille -= 2;
document.getElementById("texte").style.fontSize = taille + "px";
});
Exercice 8 : Supprimer un Élément de la Page
Objectif : Permettre à l’utilisateur de supprimer un élément de la page en cliquant sur un bouton.
Instructions : Modifier la taille de la police d’un texte lorsqu’un bouton est cliqué.
- Créez un élément
<div>contenant du texte et un bouton de suppression. - Utilisez JavaScript pour supprimer l’élément
<div>lorsque l’utilisateur clique sur le bouton.
Cliquez ici pour voir la réponse
Voici une possible solution :
<p id="texte">Ce texte va changer de taille.</p>
<button id="augmenter">Augmenter la taille</button>
<button id="diminuer">Diminuer la taille</button>
let taille = 16;
document.getElementById("augmenter").addEventListener("click", function() {
taille += 2;
document.getElementById("texte").style.fontSize = taille + "px";
});
document.getElementById("diminuer").addEventListener("click", function() {
taille -= 2;
document.getElementById("texte").style.fontSize = taille + "px";
});
Exercice 9 : Ajouter et Supprimer des Éléments d’une Liste
Objectif : Ajouter et supprimer des éléments d’une liste via des boutons.
Instructions : Modifier la taille de la police d’un texte lorsqu’un bouton est cliqué.
- Créez une liste
<ul>avec un bouton pour ajouter un nouvel élément et un bouton pour supprimer le dernier élément. - Utilisez JavaScript pour gérer l’ajout et la suppression d’éléments de la liste.
Cliquez ici pour voir la réponse
Voici une possible solution :
<ul id="maListe">
<li>Premier élément</li>
</ul>
<button id="ajouter">Ajouter un élément</button>
<button id="supprimer">Supprimer le dernier élément</button>
document.getElementById("ajouter").addEventListener("click", function() {
let nouvelElement = document.createElement("li");
nouvelElement.innerText = "Nouvel élément ajouté";
document.getElementById("maListe").appendChild(nouvelElement);
});
document.getElementById("supprimer").addEventListener("click", function() {
let liste = document.getElementById("maListe");
if (liste.lastChild) {
liste.removeChild(liste.lastChild);
}
});
Exercice 10 : Compteur avec Boutons Incrémenter et Réinitialiser
Objectif : Créer un compteur avec deux boutons : un pour incrémenter le compteur et un pour réinitialiser sa valeur.
Instructions : Modifier la taille de la police d’un texte lorsqu’un bouton est cliqué.
- Créez un paragraphe affichant un nombre et deux boutons : un pour l’incrémentation et un autre pour la réinitialisation.
- Utilisez JavaScript pour mettre à jour le compteur lorsque les boutons sont cliqués.
Cliquez ici pour voir la réponse
Voici une possible solution :
<p>Compteur : <span id="compteur">0</span></p>
<button id="incrementer">Incrémenter</button>
<button id="reinitialiser">Réinitialiser</button>
let compteur = 0;
document.getElementById("incrementer").addEventListener("click", function() {
compteur++;
document.getElementById("compteur").innerText = compteur;
});
document.getElementById("reinitialiser").addEventListener("click", function() {
compteur = 0;
document.getElementById("compteur").innerText = compteur;
});