Bonjour,
... pour commencer et en vrac ...
Je me demande, si je peux réutiliser la même boite de dialogue pour remplacer mon
prompt en mettant
input="text"
C'est une question de feeling et surtout de besoin.
J'ai vu que certains t'ont proposé des solutions que tu n'as pas mises en oeuvre.
Je ne résiste donc pas à l'envie de te soumettre une façon de faire :
J'aimerais qu'il prenne la même forme que la boite de dialogue déjà mis en place :
Là c'est du cosmétique et le CSS sert à cela.
Evidemment, cela ne fonctionne pas,
Pas surprenant au vu de ce que tu as écris, mélange JavaScript et HTML.
Rappel pour démarrer :
Il faut bien être conscient que des appels à
alert,
confirm et
prompt sont des « appels bloquants », le script attend avant de passer à la suite. Cela n'est pas le cas avec les modales, et avec rien d'autres d'ailleurs.
Avec ce code :
1
2
| alert("Message à afficher")
console.log("alert cliquée !"); |
... « alert cliquée » ne s'affichera dans la console qu'une fois la boîte d'alert validée.
Avec le code suivant
1
2
| elemDialog.showModal();
console.log("Modale cliquée !"); |
... « Modale cliquée » s'affichera avant une quelconque action sur la boîte modale ne soit effectuée.
• Tout cela pour dire que tu ne peux pas gérer les événements comme avec des alert, confirm et prompt classiques, événements synchrones.
Pour pallier à cela on a recours à une fonction de rappel, ou callback, et qui s'effectuera donc en mode asynchrone.
On peut « simuler » le comportement de la façon suivante, ce n'est qu'une solution parmi d'autres, en utilisant un formulaire et en se servant de son événement onsubmit, pour gérer les actions à effectuer.
• On va créer l'élément dialog-prompt comme suit :
1
2
3
4
5
6
7
8
9
10
11
12
| <dialog id="dialog-prompt" class="dialog-modal dialog-form">
<form id="saisie-jeu" method="dialog">
<div class="dailog-main">
<p class="dialog-header">Entrer le nom du jeu :</p>
<p class="dialog-body"><input type="text" name="nom" value=""></p>
<p class="dialog-footer">
<button class="btn-accept" data-role="accept">Valider</button>
<button class="btn-cancel" data-role="cancel">Annuler</button>
</p>
</div>
</form>
</dialog> |
• On crée une fonction que l'on va appeler getSaisie, à la quelle on passera l'élément area cliqué :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| function getSaisie(area) {
// récup. des éléments
const modalSaisie = document.getElementById("dialog-prompt");
const formSaisie = modalSaisie.querySelector("FORM");
// remise à zéro des champs
formSaisie.reset();
// pas de addEventListener ici
formSaisie.onsubmit = function(e) {
e.preventDefault();
// si bouton valider
if ("accept" === e.submitter.dataset.role) {
traiteValeur(formSaisie, area);
}
// on ferme
modalSaisie.close();
}
// on affiche
modalSaisie.showModal();
} |
On notera que la fonction traiteValeur, à définir, va s'occuper du traitement et donc que cette partie va disparaître de la fonction fonctionSurClic.
• Maintenant il faut bien appeler la fonction getSaisie et c'est dans la fonction fonctionSurClic que cela va se faire.
1
2
3
4
5
6
7
8
9
10
11
| function fonctionSurClic(e) {
// récup. élément cliqué
const elClicked = e.target;
const imgFond = document.getElementById("img-fond");
if (imgFond.classList.contains("img-disabled")) {
setStateImageFond(true);
return;
}
// demande à utilisateur
getSaisie(elClicked);
} |
C'est tout pour cette fonction, l’enchaînement se fera getSaisie -> [SUBMIT] -> traiteValeur.
• Il reste à définir la fonction traiteValeur qui va reprendre ce qui a été supprimé dans la fonction fonctionSurClic.
Cela pourrait ressembler à :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| function traiteValeur(form, area) {
// récup. de la saisie
const elemSaisie = form.querySelector("[name='nom']");
const nomJeu = elemSaisie.value.trim();
const reponse = area.dataset.nom;
// le test
if (reponse === nomJeu) {
// bingo gagné !
compt += 10;
// ajout création d'un point sur l'image
addPointOnImage(area);
// mise à jours core
document.getElementById("champDuPrompt").innerHTML = compt;
// (1) suppression de l'écouteur
area.removeEventListener("click", fonctionSurClic);
// affichage message
const msg = "Super, <b>" + nomJeu + "</b><br>est une bonne réponse !";
showModal(msg);
}
else {
// fiasco perdu !
let msg;
vie -= 1;
// mise à jour affichage nbr vies
setNbrVies(vie);
document.getElementById("nbdevies").innerHTML = vie;
// traitement résultat
if (vie == 0) {
msg = "GAME OVER";
}
else {
msg = "Il ne vous reste plus que " + vie + " vies";
}
// affichage message
showModal(msg);
}
} |
• Il ne te reste plus qu'à analyser, comprendre le principe et intégrer le total 
moi je vais prendre un cachet 
Transformer un prompt en boite modale
Répondre avec citation
Partager