11375 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'aimerais comprendre et apprendre pour récupérer une variable d'un function vers une autre function.
voici mon code.

<script>
    var d = new Date();
var date = d.getDate()+'-'+(d.getMonth()+1)+'-'+d.getFullYear();
var Balise ='[RDV LE '+date+' ';

function recupHeureSelected(recupHeure){
    var Heure = recupHeure;
    var Balise1 = Balise+' '+Heure+':';
    alert(Balise1);
    return Balise1;
 }

 var Balise2 = Balise1;

 function recupMinuteSelected(recupMinute){

        var Minute = recupMinute;
        var BaliseG = Balise2+Minute+']';
        alert (BaliseG);
 }


mais cela affiche undefined(et le bon select des minutes.00])
Donc Balise2 est inconnue.
Mais pourquoiiiiiiiiii. Smiley fache
Merci.
Modérateur
Encore faut-il savoir quoi chercher Smiley smile Il te manquait le terme certainement.
Si tu as du mal à comprendre hésites pas
Bonjour _laurent,
En fait je cherche à faire en sorte que lorsque l'user sélectionne le premier select et le deuxième select, cela affiche une textaera ou un input texte avec les infos:
'[RDV LE '+Date du jour +' '+premier select+':'+deuxième select+']'
Ensuite il suffira de cliquer sur le bouton copier pour copier et coller la balise.
code des select en php.

<form action="danslamêmepage.php" method="post">
<select name="heure" required>
<option value="">HEURE</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select name="minute" required>
<option value="">MINUTE</option>
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
<br/> <br/>
<input type="submit" value="suivant" >&nbsp;&nbsp;
</form>


Merci pour ta patience.
Modérateur
Bonsoir, il te faudrait écouter/attendre la fin de deux type d’événements dans la page que tu charges pour enfin injecter ton texte et la date

1 . le premier: Attendre que la page soit chargée pour trouver tes select
2. le second: Ajouter un événement onchange sur les selects trouvés (ou filtrés).

Pour la date : utilise la fonction Date de javascript https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date

Pour les heures et minutes, c'est tout simplement la valeur des select que tu as déterminé dans le code. (où tu attend une modification pour les injecter/mettre à jour).

En JavaScript, le code peut ressembler a ceci :
document.addEventListener("DOMContentLoaded", function () {// on attend le chargement de la page
  let selects = document.querySelectorAll("select");// on cherche nos balises 
  for (let i = 0; i < selects.length; i++) {
    selects[i].addEventListener("change", () => {// ecoute de changement de valeur selectionné
      book();// lance enfin  la fonction utile une fois tout les éléments et evenements liés identifiés.
    });
  }
});

function book() {
  let dDay = new Date();
  let update = document.querySelector("#booking");// input à mettre à jour
  let ttarea = document.querySelector("#txtA");//  ou textarea à mettre à jour
  let heure = document.querySelector('[name="heure"]').value;
  let minute = document.querySelector('[name="minute"]').value;
//  formatage de ta chane avec la date du jour et les valeurs modifiées des selects
  let newVal= 
    "RDV le " +
    dDay.toLocaleDateString() +
    " à " +
    heure +
    "H" +
    minute +
    "mn";
  update.value = newVal;//Maj
  ttarea.innerHTML= newVal//maj
}

en live pour test : https://codepen.io/gc-nomade/pen/poKpyJo

Cdt
Modifié par gcyrillus (19 Nov 2022 - 23:16)
Meilleure solution
Bonjour gcyrillus,
Un énorme merci pour tes explications et ton code.
Je vais l'étudier pour le comprendre.
Pourquoi l'étudier ?
Car je veux être capable de le faire seul, sans copier coller, et pourvoir le modifier par la suite.
Merci beaucoup.
Modifié par wisefun77 (20 Nov 2022 - 13:16)