Neophyte | Question Javascript

Tuxnux
Javascript

Décrivez ici votre problème ou ce que vous cherchez à faire.

<select class="form-select" id="sites" name="sites">
            <option value="P">Purple</option>
            <option value="R">Red</option>
            <option value="B">Blue</option>
            <option value="W">White</option>
            <option value="N">None</option>
        </select>
        <select class="form-select" id="models" name="models">
            <option disabled selected>Modèles</option>
            <option value="B">MacBook Pro/Air (Laptop)</option>
            <option value="P">Mac Pro (Desktop)</option>
            <option value="M">Mac Mini (Desktop)</option>
            <option value="S">Mac Studio (Desktop)</option>
            <option value="i">iMac (Desktop)</option>
        </select>
        <label for="number" id="number">12345</label>
        <label for="result" id="result">12345PB</label>

        <script>
        ??? :(
        </script

Ce que je veux

Bonjour,
Je ne connais pas grand chose en Javascript (pour précision)
J'ai pour mon besoin : 2 sélecteurs avec des choix d'options et un champ texte

Je voudrais Concater les 3 Champs et changer dynamiquement le resultat

Ce que j'obtiens

Avoir dans le label 'result' = number + models + sites
Exemple, si je sélectionne le modèle Mac Pro (value = P), si je sélectionne le site White (value = w) et que le chiffre du champ number soit égal à 560.

Donne comme résultat 560PW et si je sélectionne après le modèle Mac Studio que ça donne 560SW

Merci pour votre aide

3 réponses

Pitet
Réponse acceptée

Bonjour,

Un exemple possible :

let site = '',
  model = '',
  number = document.getElementById('number').innerHTML;

document.querySelectorAll('#sites, #models').forEach((select) => {
  select.addEventListener('change', (event) => {
    if (event.target.id === 'sites') {
      site = event.target.value;
    } else if (event.target.id === 'models') {
      model = event.target.value;
    }

    document.getElementById('result').innerHTML = number + model + site;
  });
});
Tuxnux
Auteur

Bonjour,
Un petit up sur ce sujet s'il vous plait :)

Merci

Tuxnux
Auteur

Merci Pitet :)