Dialog not opening on click on a td
Hi people,
I'm developing a little card game in javascript. In my game, there is a board where the player will be able to click to interact with the content of the board.
My board is a <table> with various cells classed with ID (id=Xcoord-Ycoord) which is generated with a script.
To interact with the game, I would like to use the Dialog widget to ask to the player which action he wants to do (depend of the case he clicks).
My problem is that there's no (obvious) errors in my script because everything is working but when I click on a cell, the widget doesn't appear (it just remains hided on the page). I think it's my event "click" which is bad-made but I don't know how to fix. Could you help me ?
Here's my HTML Code :
- <!DOCTYPE html>
<html>
<head>
<title>Heroes</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="js/heros.js"></script>
<script type="text/javascript" src="js/plateau.js"></script>
<script type="text/javascript" src="js/tour.js"></script>
<script type="text/javascript" src="js/tirage.js"></script>
<script type="text/javascript" src="js/divers.js"></script>
</head>
<body>
<input type="button" value="function" onclick="creationHerosAI()"/>
<div id="formulaire">
<p>Bienvenue sur le jeu Heroes</p>
<form id="form1">
<!--Nom du joueur-->
<p>Le nom de votre héros</p>
<p><input type="text" name="pseudo"/></p>
<!--Sexe-->
<p>Choisissez le sexe de votre héros</p>
<select name="sexe" onchange="afficheChoixRace(this)">
<option value="rien" selected>Choisissez...</option>
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
</select>
<!--Race-->
<div id="bloc_race_masc">
<p>Choisissez la race de votre héros</p>
<select name="race_m">
<option value="rien" selected>Choisissez...</option>
<option value="Démon">Démon</option>
<option value="Élémentaire d'énergie">Élémentaire d'énergie</option>
<option value="Élémentaire de glace">Élémentaire de glace</option>
<option value="Élémentaire de magie">Élémentaire de magie</option>
<option value="Élémentaire de magma">Élémentaire de magma</option>
<option value="Effrit">Effrit</option>
<option value="Elfe">Elfe</option>
<option value="Génie">Génie</option>
<option value="Gnoll">Gnoll</option>
<option value="Gobelin">Gobelin</option>
<option value="Homme-Lézard">Homme-Lézard</option>
<option value="Humain">Humain</option>
<option value="Liche">Liche</option>
<option value="Minotaure">Minotaure</option>
<option value="Nain">Nain</option>
<option value="Ogre">Ogre</option>
<option value="Troglodyte">Troglodyte</option>
<option value="Vampire">Vampire</option>
</select>
</div>
<div id="bloc_race_fem">
<p>Choisissez la race de votre héros</p>
<select name="race_f">
<option value="rien" selected>Choisissez...</option>
<option value="Démone">Démone</option>
<option value="Élémentaire d'eau">Élémentaire d'eau</option>
<option value="Élémentaire d'esprit">Élémentaire d'esprit</option>
<option value="Élémentaire de feu">Élémentaire de feu</option>
<option value="Élémentaire de terre">Élémentaire de terre</option>
<option value="Elfe">Elfe</option>
<option value="Effrit">Effrit</option>
<option value="Femme-Lézard">Femme-Lézard</option>
<option value="Genie">Génie</option>
<option value="Gnoll">Gnoll</option>
<option value="Gobeline">Gobeline</option>
<option value="Humaine">Humaine</option>
<option value="Liche">Liche</option>
<option value="Ogresse">Ogresse</option>
<option value="Vampire">Vampire</option>
</select>
</div>
<!--Métier-->
<div id="bloc_metier_m">
<p>Choisissez le métier</p>
<select name="metier_m">
<option value="rien" selected>Choisissez...</option>
<option value="Alchimiste">Alchimiste</option>
<option value="Apostat">Apostat</option>
<option value="Barbare">Barbare</option>
<option value="Belluaire">Belluaire</option>
<option value="Chevalier">Chevalier</option>
<option value="Chevalier de la mort">Chevalier de la mort</option>
<option value="Clerc">Clerc</option>
<option value="Druide">Druide</option>
<option value="Élémentaliste">Élémentaliste</option>
<option value="Hérétique">Hérétique</option>
<option value="Mage de guerre">Mage de guerre</option>
<option value="Magicien">Magicien</option>
<option value="Marcheur">Marcheur</option>
<option value="Nécromancien">Nécromancien</option>
<option value="Rôdeur">Rôdeur</option>
<option value="Seigneur de guerre">Seigneur de guerre</option>
<option value="Shaman">Shaman</option>
</select>
</div>
<div id="bloc_metier_f">
<p>Choisissez le métier</p>
<select name="metier_f">
<option value="rien" selected>Choisissez...</option>
<option value="Alchimiste">Alchimiste</option>
<option value="Apostat">Apostat</option>
<option value="Barbare">Barbare</option>
<option value="Chevalier">Chevalier</option>
<option value="Chevalier de la mort">Chevalier de la mort</option>
<option value="Clerc">Clerc</option>
<option value="Druide">Druide</option>
<option value="Élémentaliste">Élémentaliste</option>
<option value="Hérétique">Hérétique</option>
<option value="Mage de guerre">Mage de guerre</option>
<option value="Magicienne">Magicienne</option>
<option value="Marcheuse">Marcheuse</option>
<option value="Nécromancienne">Nécromancienne</option>
<option value="Rôdeuse">Rôdeuse</option>
<option value="Seigneur de guerre">Seigneur de guerre</option>
<option value="Shaman">Shaman</option>
<option value="Sorcière">Sorcière</option>
</select>
</div>
<input type="button" value="Oyez !" onclick="creationHeros()"/>
</form>
</div>
<p id="recapitulatif"><!--Ici vient la phrase de recap du héros après création--></p>
<div id="bouton_pret">
<input type="button" value="Prêt(e) ?" onclick="demarreJeu()"/>
</div>
<div id="messages"><!--Ici viennent les messages--></div>
<div id="plateau_jeu"><!--Ici vient le plateau de jeu--></div>
<div id="menuCreature">
<p>Invoquer la créture</p><br>
<p>Jeter</p>
</div>
</body>
</html>
Here's the script which makes the board game
- function demarreJeu() {
//Construction du plateau//
var plateau='<table>';
var i;
for (i=1;i<=24;i++) {
plateau+="<tr>";
for (j=1;j<=24;j++){
if (i==1 || i==2 || i==23 || i==24) {
if ((i==1 || i==24) && (j==10 || j==11 || j==12 || j==13 || j==14 || j==15)){
plateau+='<td class="case vert" title="" id="'+i+'-'+j+'"></td>';
}
else if(i==1 && j==8 || i==24 && j==17) {
plateau+='<td class="case gris" title="" id="'+i+'-'+j+'"></td>';
}
else {
plateau+='<td class="case jaune" title="" id="'+i+'-'+j+'"></td>';
}
}
else if(j==1 || j==2 || j==23 || j==24) {
plateau+='<td class="case jaune" title="" id="'+i+'-'+j+'"></td>';
}
else {
plateau+='<td class="case bleu" title="" id="'+i+'-'+j+'"></td>';
}
}
plateau+="</tr>";
}
plateau+="</table>";
document.getElementById("plateau_jeu").style.display="block";
document.getElementById("plateau_jeu").innerHTML=plateau;
document.getElementById("1-8").title=creationHerosAI();
document.getElementById("24-17").title=creationHeros();
//Tirage des premières cartes
document.getElementById("1-10").title=tirageCarte();
document.getElementById("1-10").className="case rouge";
document.getElementById("1-11").title=tirageCarte();
document.getElementById("1-11").className="case rouge";
document.getElementById("1-12").title=tirageCarte();
document.getElementById("1-12").className="case rouge";
document.getElementById("1-13").title=tirageCarte();
document.getElementById("1-13").className="case rouge";
document.getElementById("1-14").title=tirageCarte();
document.getElementById("1-14").className="case rouge";
document.getElementById("1-15").title=tirageCarte();
document.getElementById("1-15").className="case rouge";
document.getElementById("24-10").title=tirageCarte();
document.getElementById("24-10").className="case rouge";
document.getElementById("24-11").title=tirageCarte();
document.getElementById("24-11").className="case rouge";
document.getElementById("24-12").title=tirageCarte();
document.getElementById("24-12").className="case rouge";
document.getElementById("24-13").title=tirageCarte();
document.getElementById("24-13").className="case rouge";
document.getElementById("24-14").title=tirageCarte();
document.getElementById("24-14").className="case rouge";
document.getElementById("24-15").title=tirageCarte();
document.getElementById("24-15").className="case rouge";
//On lance le premier tour
tourJoueur();
- }
Here's the script of the dialog
- $(function(){
$(document).tooltip({
show: {effect: "slideDown", delay: 100},
position: {my: "bottom", at: "top"}
});
$( "#menuCreature" ).dialog({
autoOpen: false,
show: {effect: "blind",duration: 1000},
hide: {effect: "explode",duration: 1000}
});
$( ".rouge" ).on({
click:function(){$("#menuCreature").dialog("open");}
});
});
Sorry, comments are in French...
Thanks by advance of your help.