Obsolète le document.getElementById() ?

a marqué ce sujet comme résolu.

Salut !

J’ai remarqué par hasard que la page web suivante fonctionne sans aucun souci (et cela m’étonne !) :

<!DOCTYPE html>
<html lang="fr">
<head>

    <meta charset="utf-8">
    <title>test</title>

    <script>
      window.onload = function()
      {
          bouton.onclick = function()
          {
              alert(message.value);
          };
      };
    </script>

</head>
<body>

    <input type="text" id="message">
    <input type="button" id="bouton" value=" Valider ">

</body>
</html>

Depuis quand les navigateurs se passent-ils de la fonction document.getElementById() ?
Est-ce une bonne pratique de coder comme dans l’exemple, ou vaut-il mieux définir proprement les variables dans son code Javascript ?

Merci.

+0 -0

C’est une vieille habitude quoi doit dater probablement d’IE6 ou quelque chose du genre, et que les navigateurs gardent certainement pour ne pas casser les anciennes pages Web.

Donc ce n’est pas spécialement une bonne idée. :)
À noter qu’il y a également querySelector qui peut t’intéresser.

Au passage, le button.onclick n’est pas forcément la meilleure des idées: si ailleurs dans ton code, tu veux assigner un second événement au click, alors tu écraseras le premier. Il vaut, en général, mieux utiliser addEventListener.

Il y aurait d’autres remarques à faire, mais je laisserai cela à quelqu’un plus apte à répondre que moi. :)

+0 -0

Merci pour les réponses !

J’ai pris en compte vos remarques pour écrire une petite page web "sympa" :

<!DOCTYPE html>
<html lang="fr">
<head>

    <meta charset="utf-8">
    <title>Petite page web sympa</title>

    <script>
      function att_ortho(e)
      {
          // Une boucle pour embêter l'utilisateur ^^
          while (!confirm('Attention à l\'orthographe en écrivant !'));

          // Focus sur le champ de texte pour être
          // certain que l'utilisateur puisse y écrire
          e.target.focus();
      }

      function ajouter_au_clic(elem, f)
      {
          elem.addEventListener('click', f);
      }

      window.onload = function()
      {
          var message = document.querySelectorAll('input')[0],
              bouton  = document.querySelectorAll('input')[1];

          ajouter_au_clic(message, att_ortho);

          // La fonction 'alert' peut être appelée sans argument :
          alert();

          // Du coup, pourquoi ceci ne fonctionne pas ?
          ajouter_au_clic(bouton, alert);
      };
    </script>

</head>
<body>

    <p>Saisissez un message ci-dessous :</p>

    <input type="text">
    <input type="button" value=" Valider ">

</body>
</html>

Le souci, c’est que la ligne 35 échoue et l’erreur suivante est retournée :

TypeError: 'alert' called on an object that does not implement interface Window.

Je ne comprends pas en quoi consiste ce TypeError détecté…

Il y aurait d’autres remarques à faire, mais je laisserai cela à quelqu’un plus apte à répondre que moi. :)

Je prends note de toute remarque pouvant améliorer la qualité du code source ! ;)

+0 -0

Essaie de remplacer alert par console.log pour te rendre compte de ce qu’il se passe. Tu pourras voir le retour dans la console de développement de ton navigateur. :)

Je ferais plutôt quelque chose comme suit, si je devais écrire du Javascript vanilla (probablement qu’il y a également des choses à redire). 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Petite page web sympa</title>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', () => {
        // j'utilise `const` car je ne modifie pas les variables
        // j'aurais utilisé `let` sinon.
        const message = document.querySelector('#mytext');
        const button = document.querySelector('#mybutton');
        message.addEventListener('click', (event) => {
          while (!confirm("Attention à l'orthographie en écrivant!"));
          event.target.focus();
        });
        button.addEventListener('click', () => {
          alert();
        });
      });
    </script>
</head>
<body>
    <p>Saisissez un message ci-dessous :</p>
    <input type="text" id="mytext" />
    <input type="button" value=" Valider " id="mybutton" />
</body>
</html>
+0 -0

J’ai appris mille choses avec ton message, @dab ! :)

Essaie de remplacer alert par console.log

Cool, ça affiche l’événement 'click' !
J’imagine que console.log est indépendant de window, d’où le fait que ça fonctionne.

Haha j’ai tapé JS Vanilla et je suis tombé sur leur site officiel !
Sans le savoir, j’ai toujours programmé en Vanilla ! :)

document.addEventListener('DOMContentLoaded',

J’utilisais cette expression aussi auparavant, mais quel réel avantage apporte-t-elle en regard de window.onload ?

j’utilise const car je ne modifie pas les variables

Je dois me tromper vu que le code fonctionne, mais j’ai l’impression qu’en ajoutant des événements à tes objets, tu les modifies d’une certaine manière vu que tu leurs ajoutes des propriétés ?

Avec ce que j’ai appris (le code HTML n’a pas bougé d’un pouce) :

window.onload = () =>
{
    const message = document.querySelectorAll('input')[0],
          bouton  = document.querySelectorAll('input')[1];

    message.addEventListener('click', (event) =>
    {
        while (!confirm('Attention à l\'orthographe en écrivant !'));
        event.target.focus();
    });

    bouton.addEventListener('click', () =>
    {
        alert('Vous avez écrit : ' + message.value);
    });
};
+0 -0

Il ne faut pas utiliser window.onload car tu ne peux pas combiner les événements, il faut utiliser : addEventListener. 

document.addEventListener("DOMContentLoaded", function () {
    alert(1);
});

document.addEventListener("DOMContentLoaded", function () {
    alert(2);
});

http://jsfiddle.net/3bx1qgd8/

Je continue à dire que () => { avec un event n’est pas vraiment souhaitable car tu ne peux plus utiliser la variable this.

Essaye le code ci-dessus en cliquant sur la div et le body. ;)

document.body.addEventListener("click", function (event) {
  alert(`this: ${this.tagName}, event : ${event.target.tagName}`);
  console.log(this, event.target);
});

html, body { height:100%; width:100%; }
div { height:150px; background:lightblue; }

<div> </div>

http://jsfiddle.net/km9Ldnx2/

+0 -0

Merci pour ces infos, A-312 !
Du coup, je propose d’utiliser this partout où c’est possible (lignes 3, 4 et 16) :

document.addEventListener('DOMContentLoaded', function()
{
    const message = this.querySelectorAll('input')[0],
          bouton  = this.querySelectorAll('input')[1];

    bouton.addEventListener('click', () =>
    {
        alert('Vous avez écrit : ' + message.value);
        message.value = '';
        message.focus();
    });

    message.addEventListener('click', function()
    {
        while (!confirm('Attention à l\'orthographe en écrivant !'));
        this.focus();
    });

    message.addEventListener('keydown', evt =>
    {
        if (evt.key == 'Enter')
        {
            bouton.click();
        }
    });
});

Esthétiquement, je trouve que ce code n’est pas très lisible, qu’en dites-vous ?

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte