[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+

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 :
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

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 !