Affichage

6 min 4 exercices Niveau 2

Énoncé

Soit le code HTML suivant :

<html>
<head>
    <title>Exercice JS 1</title>
</head>
<body>
    <header>
        <h1 id="titre_principal">Ceci est le titre d'origine</h1>
    </header>
    <section>
        <h2 id="titre_secondaire">Ceci est le second titre secondaire</h2>
        <p id="paragraphe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet blandit massa, eget euismod magna euismod sed. Sed a congue mauris. Donec elementum mauris at pharetra accumsan. Cras auctor iaculis ligula sed congue. Aliquam dui magna, maximus vel rutrum in, rhoncus nec libero. Sed rutrum mi metus, eu consequat nibh semper eu. In dignissim nulla nec eros suscipit, non mattis lacus pulvinar. Nam augue leo, laoreet eu diam et, aliquam dictum ipsum. Mauris ipsum nisi, finibus at cursus quis, sagittis ac turpis. Donec luctus, massa eget sagittis ullamcorper, nulla metus facilisis ipsum, ut dapibus nulla arcu et justo. Donec eget interdum lectus. Fusce non ornare nunc. In a metus lectus. Nunc massa sem, fermentum nec ante accumsan, porttitor ullamcorper libero. Quisque at urna nisl.</p>
    </section>
</body>
</html>

Vous devez réaliser 3 changements au sein du code :

  • Changer le titre principal en “Coucou toto”
  • Corriger le titre secondaire en “Ceci est le premier titre secondaire”
  • Changer le contenu du paragraphe en “Ceci est un tout petit paragraphe que j’ai réalisé à la suite d’un exercice trouvé sur Microlead”.

Contraintes

  • Les éléments HTML doivent être récupérés grâce à leurs id,
  • 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

L’ensemble de ces résultats sont visibles lors du chargement de la page HTML au sein de votre navigateur :

  • Le titre principal affiche “Coucou toto”
  • Le titre secondaire affiche “Ceci est le premier titre secondaire”
  • Le paragraphe affiche “Ceci est un tout petit paragraphe que j’ai réalisé à la suite d’un exercice Microlead”

Astuces

  • La méthode getElementById() vous permettra de réaliser des sélections !
logo discord

Besoin d'aide ?

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

En savoir plus