11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Un moyen plus pro...

Bonjour à tous,
il y aurait un moyen plus pro d'écrire ceci ?
Merci d'avance pour votre aide !



<div class="info-bloc" id="message">
    04 74 01 02 03
</div>
<svg viewBox="0 0 22 22" onclick="telephone()">
<svg viewBox="0 0 22 22" onclick="mail()">
<svg viewBox="0 0 22 22" onclick="adresse()">





<script type="text/javascript">
        function telephone() {
            document.getElementById('message').innerHTML = '04 74 01 02 03';
        }

        function mail() {
            document.getElementById('message').innerHTML = 'monmail@gmail.com';
        }

        function adresse() {
            document.getElementById('message').innerHTML = 'Rue des platanes - PARIS';
        }
    </script>

Modifié par etienne69 (15 Oct 2019 - 15:23)
Salut etienne69,
pour rendre cette petite fonctionnalité plus "pro" comme tu dis, plus optimisé j'aurais tendance à faire ça :
<div class="info-bloc" id="message">---</div>
<button data-infos-action="phone">Téléphone</button>
<button data-infos-action="mail">Mail</button>
<button data-infos-action="address">Adresse</button>

let data = {
      phone: '04 74 01 02 03',
      mail: 'monmail@gmail.com',
      address: 'Rue des platanes - PARIS'
    },
    buttons = document.querySelectorAll('[data-infos-action]')

buttons.forEach(elem => {
  elem.addEventListener('click', setData);
})

function setData(ev) {
  let messageContainer = document.getElementById('message'),
      dataType = ev.currentTarget.dataset.infosAction,
      message = data[ev.currentTarget.dataset.infosAction]
  if(typeof message !== 'undefined') {
    messageContainer.innerHTML = message
  }
}

https://codepen.io/korell/pen/mddEdMv
Plus se baser sur des attributs "data-" et attacher des événements. Le but étant également de ne déclarer qu'une sel fonction "setData()"
A+
Administrateur
Bonjour,

Déjà dans le code de MatthieuR mais pas explicité : quand un élément doit être cliquable, utiliser des boutons (ou des input type submit/button/cancel voire image mais ça se style avec bien moins de liberté ou des liens si ça mène quelque part ailleurs bien entendu). Ainsi ça fonctionne également au clavier, déjà parce qu'on peut atteindre l'élément en tabulant (il prend naturellement le focus) mais aussi parce qu'on peut ensuite l'activer au clavier (touche espace et/ou entrée). Avec ça on est à peu près certain que ça fonctionne au touch sur mobile sans rien faire de plus.
Remarque tout de même : le type par défaut d'un <button> est submit (MDN) et on veut souvent le type button
Bonjour etienne69,
Il y une raison pour que les données soit dans le javascript?

Je pense aussi que MatthieuR a fait une petite erreur ou c'est moi qui divague Smiley cligne :
dataType est soit en trop soit doit être mis dans message = data[dataType ]

Personnellement :
s'il n'a pas de raison que data = {} soit global, je l'aurai mis dans la fonction setData()
et j'aurai mis messageContainer = document.getElementById('message') dans la condition if
Hello aliasdmc,
En effet, il faut utiliser dataType à la ligne suivante...
Et également, ta remarque sur la variable data est pertinente. Généralement j'évite de mettre des données dans une fonction. Mais qu'elle soit globale n'est pas idéal non plus, on peut en faire le retour d'une fonction.

Felipe évoquait également le type par défaut des <button> et effectivement il faudrait ajouter un attribut type="button"

Du coup ça pourrait donner ça :
let buttons = document.querySelectorAll('[data-infos-action]')

buttons.forEach(elem => {
  elem.addEventListener('click', setData);
})

function setData(ev) {
  let messageContainer = document.getElementById('message'),
      dataType = ev.currentTarget.dataset.infosAction,
      message = getMessage(dataType)
  if(typeof message !== 'undefined') {
    messageContainer.innerHTML = message
  }
}

function getMessage(dataType) {
  return {
      phone: '04 74 01 02 03',
      mail: 'monmail@gmail.com',
      address: 'Rue des platanes - PARIS'
    }[dataType]
}

<div class="info-bloc" id="message">---</div>
<button data-infos-action="phone" type="button">Téléphone</button>
<button data-infos-action="mail" type="button">Mail</button>
<button data-infos-action="address" type="button">Adresse</button>

https://codepen.io/korell/pen/mddEdMv
A+
Meilleure solution
Si tu veux aller un peu plus loin, voici la version avec une classe ES6 :
https://codepen.io/korell/pen/poobqqL
class MessagesService {
  static messages = {
    phone: "04 74 01 02 03",
    mail: "monmail@gmail.com",
    address: "Rue des platanes - PARIS"
  };

  constructor(wrapper) {
    this.wrapper = wrapper;
    this.buttons = this.wrapper.querySelectorAll("[data-infos-action]");
    this.messageContainer = this.wrapper.querySelector('[data-messages-element="message-container"]');
    this.bindEvents();
  }

  bindEvents() {
    this.buttons.forEach(elem => {
      elem.addEventListener("click", ev => this.setData(ev));
    });
  }

  setData(ev) {
    let dataType = ev.currentTarget.dataset.infosAction,
      message = MessagesService.getMessage(dataType);
    if (typeof message !== "undefined") {
      this.messageContainer.innerHTML = message;
    }
  }

  static getMessage(dataType) {
    return MessagesService.messages[dataType];
  }
}
document.querySelectorAll('[data-messages-element="wrapper"]').forEach(wrapper => {
  new MessagesService(wrapper);
});


<div data-messages-element="wrapper">
  <div data-messages-element="message-container">---</div>
  <button data-infos-action="phone" type="button">Téléphone</button>
  <button data-infos-action="mail" type="button">Mail</button>
  <button data-infos-action="address" type="button">Adresse</button>
</div>

<div data-messages-element="wrapper">
  <div data-messages-element="message-container">---</div>
  <button data-infos-action="phone" type="button">Téléphone</button>
  <button data-infos-action="mail" type="button">Mail</button>
  <button data-infos-action="address" type="button">Adresse</button>
</div>

Modifié par MatthieuR (17 Oct 2019 - 13:20)
Merci à vous trois... Le code de MatthieuR avec le retour de data depuis une fonction est parfait... Rien que cette partie de code dépasse largement mes compétences (je ne parle même pas de la version avec une classe ES6) mais il fonctionne nickel. Je vais modifier l'apparence des buttons et ce sera super !
Encore merci pour votre aide !
Sujet clos
Aller à