Exercices JavaScript : Fonctions et événement onclick
Exercice 1 : Afficher un message
1. Créez une fonction JavaScript nommée `afficherMessage` qui affiche une alerte avec le
message : "Bonjour, bienvenue !".
2. Ajoutez un bouton dans votre fichier HTML. Lorsque l'utilisateur clique sur ce bouton, la
fonction `afficherMessage` doit être appelée.
Code attendu :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 1</title>
<script>
function afficherMessage() {
alert("Bonjour, bienvenue !");
}
</script>
</head>
<body>
<button onclick="afficherMessage()">Cliquez ici</button>
</body>
</html>
Exercice 2 : Changer le contenu d'un élément
1. Créez une fonction nommée `changerTexte` qui modifie le texte d'un paragraphe ayant
l'id `monParagraphe`.
2. Ajoutez un bouton. Lorsque l'utilisateur clique dessus, le texte du paragraphe doit devenir
: "Texte modifié avec JavaScript !".
Code attendu :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 2</title>
<script>
function changerTexte() {
document.getElementById("monParagraphe").innerText = "Texte modifié avec
JavaScript !";
}
</script>
</head>
<body>
<p id="monParagraphe">Ceci est un paragraphe.</p>
<button onclick="changerTexte()">Modifier le texte</button>
</body>
</html>
Exercice 3 : Changer la couleur de fond
1. Créez une fonction nommée `changerCouleur` qui change la couleur de fond d'une
division ayant l'id `maDiv` en bleu.
2. Ajoutez un bouton. Lorsque l'utilisateur clique dessus, la couleur de fond doit changer.
Code attendu :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 3</title>
<style>
#maDiv {
width: 200px;
height: 100px;
background-color: lightgray;
}
</style>
<script>
function changerCouleur() {
document.getElementById("maDiv").style.backgroundColor = "blue";
}
</script>
</head>
<body>
<div id="maDiv"></div>
<button onclick="changerCouleur()">Changer la couleur</button>
</body>
</html>
Exercice 4 : Afficher une valeur saisie
1. Créez une fonction nommée `afficherValeur` qui récupère la valeur d'un champ de saisie
(input) et l'affiche dans une alerte.
2. Ajoutez un champ de saisie et un bouton. Lorsque l'utilisateur clique sur le bouton, la
valeur saisie doit s'afficher.
Code attendu :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 4</title>
<script>
function afficherValeur() {
const valeur = document.getElementById("monInput").value;
alert("Vous avez saisi : " + valeur);
}
</script>
</head>
<body>
<input type="text" id="monInput" placeholder="Entrez quelque chose">
<button onclick="afficherValeur()">Afficher la valeur</button>
</body>
</html>
Exercice 5 : Compteur de clics
1. Créez une fonction nommée `incrementerCompteur` qui incrémente un compteur à
chaque clic sur un bouton.
2. Affichez la valeur actuelle du compteur dans un paragraphe.
Code attendu :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 5</title>
<script>
let compteur = 0;
function incrementerCompteur() {
compteur++;
document.getElementById("compteur").innerText = compteur;
}
</script>
</head>
<body>
<p>Compteur : <span id="compteur">0</span></p>
<button onclick="incrementerCompteur()">Cliquer ici</button>
</body>
</html>
