Exercice 2/4

Dans le fichier script.js :

  • récupérez le lien a dans une variable a;
  • modifiez son attribut href par "https://news.google.fr/";
  • modifier son contenu HTML par "News Google";
  • cliquez sur Soumettre ma réponse.

Leçon 2/4

Il est possible de modifier un attribut d'un élément HTML.

Modifier l'attribut d'un élément HTML

element.attribute = "Nouvelle valeur";

Ici attribute est à remplacer par le nom de l'attribut en question.

Exemple :

element.src = "monimage.png"

Ici on récupère un élément HTML (une image) et on change le lien vers le fichier en question.

Commentaires les mieux notés

  • gaudin.yannick69-79

    Bonsoir, je ne comprends pas mon erreur, j'ai testé le code suivant et il fonctionne, pourtant on me dit que le contenu de href dans n'est pas le bon:

  • molinari.eva

    Bonjour, je m'excuse de ne comprends plus trop là si vous pouviez m'aider un peu je suis preneuse !!! Merci d'avance !!

  • mram Administrateur

    Là vous mettez directement <a> (donc du code HTML) dans le code Javascript, ça ne fonctionnera donc pas.

  • patricerameaux

    il faut utiliser first-child dont la syntaxe est a: first-child{ propriété } et querySelector() et a.href = "" ou bien j'ai tout faux ?

48 Commentaires

  • gaudin.yannick69-79

    gaudin.yannick69-79

    Bonsoir, je ne comprends pas mon erreur, j'ai testé le code suivant et il fonctionne, pourtant on me dit que le contenu de href dans n'est pas le bon:

    le 18/08/2018 à 19h41

  • mram

    mram Administrateur

    Bonjour, je pense il manquait le slash / de fin d'URL.

    Le lien est fonctionnel sans, mais on vérifie le contenu de "href" avec le / inclus.

    le 28/08/2018 à 22h43

  • molinari.eva

    molinari.eva

    Bonjour, je m'excuse de ne comprends plus trop là si vous pouviez m'aider un peu je suis preneuse !!! Merci d'avance !!

    le 26/11/2017 à 14h34

  • mram

    mram Administrateur

    Là vous mettez directement <a> (donc du code HTML) dans le code Javascript, ça ne fonctionnera donc pas.

    le 20/10/2016 à 13h26

  • patricerameaux

    patricerameaux

    il faut utiliser first-child dont la syntaxe est a: first-child{ propriété } et querySelector() et a.href = "" ou bien j'ai tout faux ?

    le 20/10/2016 à 15h01

  • santikush

    santikush

    Il me semblait avoir compris la logique mais la encore je bloque...

    le 24/05/2017 à 20h23

  • mram

    mram Administrateur

    Il faut là aussi utiliser querySelector() pour récupérer l'élément HTML en question (le lien <a>).

    le 20/10/2016 à 13h26

  • santikush

    santikush

    le 24/05/2017 à 20h23

  • patricerameaux

    patricerameaux

    j'ai saisi quelque chose mais je ne comprends pas bien l'énnoncé : vos explications sont trop approximatives j'attends vos éclaicissements

    le 20/10/2016 à 11h30

  • mram

    mram Administrateur

    Pourquoi :first-child ? Juste récupérer "a" avec querySelector() suffira.

    le 21/10/2016 à 10h37

  • patricerameaux

    patricerameaux

    je me suis trompé d'exercice excusez-moi

    le 21/10/2016 à 10h43

  • Shao_pix

    Shao_pix

    bonjours,je bloque sur cette exercice, j'ai trouver un resultat tout a fait correcte, mais il me soutien que le resutat est mauvais ... et je ne comprend pas l'exemple a gauche ...

    le 12/10/2016 à 08h52

  • pascal-ds

    pascal-ds

    je tourne en rond, je ne suis pas certain d'avoir compris le descriptif. "élement" est ce qu'on cherche à atteindre, soit la balise <a> dans l'exercice... vrai ? (si j'ai bien compris, un element html en js est une paire de balises...) On peut donc utiliser le getElementsByTagName...vrai ? le résultat - la variable que j'ai nommée "lien" - contient cet élément qui est en fait un tableau...(c'est là que ça commence à se brouiller...) Dans l'expression element.attribute ="xyz ", element serait mon contenu "lien", attribute celui qu'on veut remplacer "href"... vrai ? pour modifier le contenu on peut utiliser element.innerHTLM ... vrai ? j'obtiens le message : "L'attribut src de l'élément a ne possède pas le bon contenu.,L'élément a ne possède pas le bon contenu." que vient faire "src" ici ? et pourquoi a n'a pas le bon contenu ?? Dans openclassroom, ils utilisent getAttribute() et setAttribute() pour réaliser cet exercice... je passe en attendant vos remarques, là, je nage.

    le 06/09/2016 à 10h40

  • pascal-ds

    pascal-ds

    j'ai jeté un coup d'oeil à l'exercice suivant... même combat que celui-ci, inutite d'essayer d'aller plus loin tant que celui-ci n'est pas assimilé :(.

    le 06/09/2016 à 11h04

  • mram

    mram Administrateur

    Pour l'attribut "src" dans le message d'erreur, ne pas prendre en compte, c'est bien "href", c'est corrigé.

    le 06/09/2016 à 14h28

  • mram

    mram Administrateur

    "getElementsByTagName" ne renvoi pas un élément HTML, mais une collection de tous les éléments qui seront trouvés. Par "collection", j'entends un extrait du DOM donc votre variable "lien" contient beaucoup plus d'informations qu'un simple élément (ou balise) HTML et ne peut donc pas être traitée directement ainsi. Par contre "querySelector" récupère le premier élément HTML correspondant aux critères du sélecteur utilisé avec et peut donc être utilisé et traité tel quel dans la suite du code.

    le 06/09/2016 à 14h32

  • mram

    mram Administrateur

    De manière générale, on utilise "querySelector" car c'est beaucoup plus flexible que les autres techniques puisqu'on peut mettre n'importe quel forme de sélecteur CSS et cibler les éléments de manières plus précises.

    le 06/09/2016 à 14h33

  • pascal-ds

    pascal-ds

    ok. ça fonctionne. Oui pour "collection" c'est ce que me renvoyait "alert" quand je faisais le test. Je pensais que l'instruction suivante allait chercher le href dans la collection... apparemment non.

    le 07/09/2016 à 09h22

  • mram

    mram Administrateur

    Votre variable "element" ligne 2 n'existe pas définie dans votre code. Par contre vous avez déclarer une variable "href".

    le 29/05/2017 à 15h20

  • Pakal texas ranger

    Pakal texas ranger

    bonjour , je bloque un peu la :) de l'aide serai utile je pense que ma logique et pas mauvaise mais sa ne valide pas :'( voici var href = document.querySelector("a"); href.attribute ="https://news.google.fr"; href.innerHTML="News Google";

    le 17/03/2017 à 15h15

  • bsmeyers84

    bsmeyers84

    Je bloque totalement un petit coup de main serai pas de refus. voici mon message: L'ATTRIBUT HREF DE L'ÉLÉMENT A NE POSSÈDE PAS LE BON CONTENU.,L'ÉLÉMENT A NE POSSÈDE PAS LE BON CONTENU.

    le 25/09/2016 à 16h37

  • mram

    mram Administrateur

    lien.innerHTML sert juste à insérer le texte. Il faut aussi utiliser lien.href pour insérer l'URL.

    le 16/10/2016 à 23h27

  • mram

    mram Administrateur

    Ligne 1 pas besoin de .innerHTML, on ne fait que récupérer un élément (la balise a). Ligne 2 pourquoi réutiliser querySelector ?? La ligne 3 est correcte.

    le 28/09/2016 à 20h52

  • mram

    mram Administrateur

    Erreur ligne 2, il ne faut pas mettre "attribute" mais le nom de l'attribut lui-même qui est "href".

    le 21/03/2017 à 17h30

  • gasnier.br

    gasnier.br

    Bonjour, mon code semble fonctionner sur la partie HTML quand je lance le script. Pour autant, impossible de valider ! Mon code est-il correct ? Si non, pourriez-vous m'éclairer. Merci.

    le 11/01/2018 à 19h20

  • mram

    mram Administrateur

    Bonjour, pour l'instant votre code est correct, mais il est incomplet. Il manque une instruction.

    le 12/01/2018 à 02h42

  • molinari.eva

    molinari.eva

    c'est bon !

    le 26/11/2017 à 14h42

  • Gergaud.benjamin

    Gergaud.benjamin

    Quelqu'un aurait un cours qui soit utile plutot que celui la qui est minable et incomprehensible ?

    le 03/09/2017 à 16h30

  • mram

    mram Administrateur

    Bonjour, qu'est ce que vous n'avez pas compris ?

    le 06/09/2017 à 11h10

  • djalloh2016-72

    djalloh2016-72

    Très honnetement l'exo là a du kilo franchement pour le valider il m'a fallut une journée entière de taff,mais bon après tout c'est ça le code,,chercher chercher chercher et trouver forcément...bingo...pour info la leçon n'a pas grand chose à voir ici pour valider l'exo car il vous faudra utiliser querySelecotor("a")

    le 01/03/2018 à 15h07

  • sterbik.pierrealexandre-1

    sterbik.pierrealexandre-1

    Bonjour ! Pouvez-vous regarder mon code ? Je ne comprends pas mon erreur

    le 31/05/2018 à 14h15

  • mram

    mram Administrateur

    Bonjour, il manque l'utilisation de .innerHTML.

    le 02/06/2018 à 05h18

  • gasnier.br

    gasnier.br

    Merci. Grâce à votre remarque, j'ai compris.

    le 12/01/2018 à 13h14

  • minos.ivan

    minos.ivan

    Bonjour "mram", lorsque j'active Javascript le contenu et le lien href de mont document parraissent bons, mais il me dit quand même que mon lien n'est pas bon.

    le 06/05/2018 à 12h13

  • mram

    mram Administrateur

    Bonjour, vous avez oublié un / à la fin de l'url du lien.

    le 09/05/2018 à 06h26

  • minos.ivan

    minos.ivan

    ha il me manquait le "/". Tout va mieux

    le 06/05/2018 à 12h16

  • mram

    mram Administrateur

    Oui, ce n'était pas forcément évident à voir.

    le 09/05/2018 à 06h26

  • berte.sad-33

    berte.sad-33

    Bonjour, Pourriez-vous me dire ce qui coince dans mon code?

    le 25/03/2018 à 11h29

  • mram

    mram Administrateur

    Bonjour, c'est HTML et pas HTLM.

    le 28/03/2018 à 05h58

  • guillaume.b81-47

    guillaume.b81-47

    Bonjour, j'ai ce message d'erreur :"Vous devez modifier le contenu de la balise a par la bonne valeur (News Google)" alors que mon code me semble correct : var a = document.querySelector("ul > a"); a.href = "https://news.google.fr/";

    le 20/02/2019 à 16h31

  • meriam

    meriam Administrateur

    Bonjour votre code correct mails incomplet, il est indiqué de modifer l' attribut href par "https://news.google.fr/" et modifier son contenu HTML par "News Google". Tu n'as modifié que l'attribut href mais tu n'as pas modifié le contenu de a, il manque une instruction.

    le 21/02/2019 à 11h03

  • belespoir38

    belespoir38

    Au bout de long tatonnement : var image=document.querySelector ('a'); image.href= "https://news.google.fr/"; mais la réponse pour validation est "l'élement n'a pas le bon contenu" ?

    le 14/01/2018 à 16h44

  • mram

    mram Administrateur

    Bonjour, il est préférable de donner un nom de variable qui représente bien ce qu'on va récupérer (ici un lien). Donc "image" n'est pas très approprié, mais une variable "a" oui. Pourquoi mettre "modif=a.innerHTML;" ça ne sert à rien. Dès que vous exécutez les lignes 2 et 3 les modifications sont faites dans le DOM.

    le 17/01/2018 à 19h36

  • belespoir38

    belespoir38

    On recup l'élément à modifier var maBalise = document.getElementById('myIdent'); // On ajoute l'attribut maBalise.setAttribut = 'newAttribut'; // Modifie l'attribut var newAttrb = maBalise.getAttribute('newAttribut'); maBalise.setAttribute('newAttribut', 'newValue'); C'est ce que j'ai trouvé sur le net. Est-ce un début de réponse ?

    le 14/01/2018 à 17h06

  • mram

    mram Administrateur

    Bonjour, il y a moyen de faire plus simple car là vous créez un attribut HTML alors qu'ici il existe déjà dans le code (c'est "href") et on souhaite juste modifier sa valeur.

    le 17/01/2018 à 19h38

  • belespoir38

    belespoir38

    var a = document.querySelector("a"); a.innerHTML = "News Google"; a.href="https://news.google.fr/"; modif=a.innerHTML; Je me suis largement inspirée d'un élève; Pouvez-vous m'expliquer à quoi sert la commande "modif=..." ? Car j'ai vu qu'elle peut être remplacée par alerte(a) ?

    le 14/01/2018 à 17h51

  • mram

    mram Administrateur

    Et bien justement, je ne vois pas pourquoi vous utiliser une variable "modif" qui n'est pas demandée et qui n'existe pas. Où avez-vous vu cela ? Car là ça ne sert à rien.

    le 17/01/2018 à 19h40

  • triplaxs

    triplaxs

    querySelector("a"); a.href ="https://news.google.fr/"; pouver vous me dir ou sont mes faute?

    le 08/09/2017 à 09h00

  • mram

    mram Administrateur

    Bonjour, .querySelector() est une fonction qui s'applique à "document" donc il faut bien mettre "document.querySelector()". La dernière version de votre code semble correcte.

    le 12/09/2017 à 16h08

  • triplaxs

    triplaxs

    var a = document.querySelector("a"); a.innerHTML = "News Google"; a.href="https://news.google.fr/"; alert(a); eureka !

    le 08/09/2017 à 10h56

  • triplaxs

    triplaxs

    alert (a); optionnelle L1 donne accès ou contenant "élément a" ou "nœud a" L2 a.innerHTML permet de modifier le texte du contenant a, L3 a.href="https://news.google.fr/"permet de modifier le contenue .

    le 08/09/2017 à 11h11

  • triplaxs

    triplaxs

    ai je bien compris ?

    le 08/09/2017 à 11h13

  • mram

    mram Administrateur

    Oui c'est ça :) Petite précision : L3 on modifie la valeur de l'attribut "href" .

    le 12/09/2017 à 16h10

  • dilmi.chourouk

    dilmi.chourouk

    Trouvé >>> var ng = document.querySelector("a"); //Selectionne a, html ng.innerHTML = "News Google"; //modifie nom element avec innerHTML ng.href = "https://news.google.fr/"; //modifie valeurs attribue de l'element

    le 26/01/2018 à 22h19

  • dilmi.chourouk

    dilmi.chourouk

    J'ai essayé de creer un autre lien au lieu de le modifier, par contre j'ai pas reussi à le mettre dans la liste >>> var elm = document.createElement("a"); //Creer tag a dans html ***** elm.href = "https://news.google.fr/"; //Donne valeurs attribue ***** var NewsGoogle = document.createTextNode("News Google"); //Creer texte pour noeud enfant de elm ***** elm.appendChild(NewsGoogle); //Place NewsGoogle comme enfant de elm ***** document.body.appendChild(elm); //Place elm comme enfant de body

    le 26/01/2018 à 22h33

  • mram

    mram Administrateur

    Bonjour, vous cherchez trop compliqué. Pas besoin de créer de nouveau lien. Juste sélectionner celui déjà existant et modifier les valeurs demandées.

    le 30/01/2018 à 18h32

  • alexis_masson1-76

    alexis_masson1-76

    je sais que ma façon de faire est mauvaise (suffirait qu'il y ait un autre lien et BOUM), mais quand même -> var result = document.getElementsByTagName('a'); var longueur = result.length; result[0].innerHTML = "News Google";

    le 16/08/2018 à 11h46

  • mram

    mram Administrateur

    Avez-vous un message d'erreur ?

    le 28/08/2018 à 22h13

  • philgd28

    philgd28

    bonjour, idem ici le code fonctionne sous Bracket, mais pas dans votre exercice, je considère que j'ai bon.

    le 18/08/2017 à 10h57

  • mram

    mram Administrateur

    Bonjour, oui le code est bon :)

    le 22/08/2017 à 12h41

  • mram

    mram Administrateur

    Attention, si vous exécutez Javascript votre code fonctionne normalement (vous devriez voir les changements dans la fenêtre "résultats"), c'est au niveau de la correction qu'il y a un souci qu'on va régler.

    le 22/08/2017 à 12h43

index.html
script.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM</title> </head> <body> <h1>Titre h1</h1> <p class="par">Paragraphe 1</p> <h2>Titre h2</h2> <p class="par">Paragraphe 2</p> <ul> <li>Item 1</li> <li>Item 2</li> <li><a href="http://www.google.fr">Item 3</a></li> </ul> <div id="bloc"> <h3>Titre h3</h3> <p class="par">Paragraphe 4</p> </div> <script src="script.js"></script> </body> </html>