[Java] Question de débutant sur le forum Programmation - 14-01-2015 15:22:55

Laarpin

Niveau 10

14 janvier 2015 à 15:22:55

Bonjour,

Pour un projet de création de jeu pour l'ISN, j'ai du utiliser l'élément inner.HTML pour créer un indice. Mais, quand on clique sur le bouton Indice, ce dernier disparait et le message s'affiche, mais il n'est pas à la bonne place. J'aimerais savoir comment le placer, de façon à ce qu'il puisse apparaitre au même endroit que le bouton

(Je tiens aussi a dire que j'ai cherché sur google et sur ce forum, mais je n'ai trouvé aucune information qui pourrait m'aider par rapport a mon problème. )

Merci d'avance.

Schiffer

Niveau 10

14 janvier 2015 à 15:58:31

Code source ?
Et c'est Javascript et pas Java

Laarpin

Niveau 10

14 janvier 2015 à 16:04:56

Une partie du code (si besoin je peux envoyer l'intégralité par MP) :

<div id="zone_bouton">
<div class="indice"> 
<p>Indice</p>
</div>
</div>

var setupEvents=function(){
var aide =document.getElementById("zone_bouton");
aide.addEventListener("click",action)
}
window.addEventListener("load",setupEvents);

var action=function(){
var eltindice=document.getElementById("zone_bouton");
eltindice.innerHTML="Ceci est un indice";
}

--

Désolé d'avoir confondu Java et Javascript.

Laarpin

Niveau 10

14 janvier 2015 à 16:06:03

Je n'ai pas précisé, le bouton est bien hors de la balise script. Seuls les deux dernier paragraphes sont dedans.

Laarpin

Niveau 10

14 janvier 2015 à 18:49:13

Personne ?

Schiffer

Niveau 10

14 janvier 2015 à 19:04:01

eltindice.innerHTML += "Ceci est un indice"

Laarpin

Niveau 10

14 janvier 2015 à 19:10:59

J'ai modifié le code. Cette fois ci le bouton reste quand on clique dessus, mais le message "Ceci est un indice" apparais toujours a la même place.
Comment puis-je placer ce message svp ?

Message édité le 14 janvier 2015 à 19:11:47 par Laarpin

Schiffer

Niveau 10

14 janvier 2015 à 19:17:10

Ajoute un id à ton indice
<div id="zone_bouton"> <div class="indice">  <p id="indice_bouton">Indice</p> </div> </div>

Après tu peux y accéder avec getElementById et changer son contenu (utilise CSS pour l'emplacement)

Message édité le 14 janvier 2015 à 19:17:40 par Schiffer

Laarpin

Niveau 10

14 janvier 2015 à 19:28:17

Merci, mais est-ce que je dois encore écrire du code après le document.getElementById ?
J'ai essayé ceci :

var objet = document.getElementById("indice_bouton");
objet.style.position: absolute; 
objet.style.bottom: 400px; 
objet.style.right: 210px;

car il me semblait l'avoir vu sur un site, mais ça n'a pas l'air de marcher.

Message édité le 14 janvier 2015 à 19:30:10 par Laarpin

Schiffer

Niveau 10

14 janvier 2015 à 19:40:28

Faut que ce soit un string
objet.style.position: "absolute";

Laarpin

Niveau 10

14 janvier 2015 à 19:57:19

J'ai essayé de modifier le code, mais rien ne fonctionne.
J'ai essayé ceci :


var objet = document.getElementById("indice_bouton");
objet.style.position = "absolute";
var x = 100, y = 200;
objet.style.left = x + "px";
objet.style.top = y + "px";
}

trouvé sur ce site : http://stackoverflow.com/questions/6576615/positioning-an-element-using-values-from-javascript-variables
Mais ça ne marche pas non plus.

Schiffer

Niveau 10

14 janvier 2015 à 20:05:18

Normalement ça devait fonctionner
Regarde la console d'erreur

Laarpin

Niveau 10

14 janvier 2015 à 20:09:24

Aucune erreur n'est détectée.
Le site marche bien, mais le message "Ceci est un indice" ne s'est toujours pas déplacé.
Peut-être que le problème viens d'autre part ?
Je peux envoyer le code source complet par Mp.

Message édité le 14 janvier 2015 à 20:10:20 par Laarpin

Schiffer

Niveau 10

14 janvier 2015 à 20:11:29

Déjà utilise CSS pour ça au lieu du JS
#indice_bouton { position: absolute /* etc... */ }

Laarpin

Niveau 10

14 janvier 2015 à 20:14:32

Le problème en faisant ça, c'est que le bouton a disparu. L'id "indice_bouton" est directement attribué à la balise <p>.

Schiffer

Niveau 10

14 janvier 2015 à 20:19:39

Poste le code source ici si tu peux, ça pourrait aider les autres qui auront un problème de ce genre

Message édité le 14 janvier 2015 à 20:19:55 par Schiffer

Laarpin

Niveau 10

14 janvier 2015 à 20:21:30

Le voici en entier :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen"></style>
  <link href="niveaux.css" rel="stylesheet" type="text/css" media="screen">
    <title>Niveau 1 - 4 images, 1 mot</title>
	
  </head>
  <body>
  <h1>Niveau 1</h1>
  <div class=images>
  <a href="Niv1-1.html"><img title="Cliquez pour zoomer" height="350" width="400" src="http://roadsmag.com/wp-content/uploads/2013/01/a46604439276000b0f579cc8b6e1058e.jpg" /> </a>
  <a href="Niv1-2.html"><img title="Cliquez pour zoomer" height="350" width="400" src="http://www.insphy.com/imgboutique/bande-de-crepe.jpg" /></a>
  </br>
  <a href="Niv1-3.html"><img title="Cliquez pour zoomer" height="350" width="400" src="bd.jpg" /> </a>
  <a href="Niv1-4.html"><img title="Cliquez pour zoomer" height="350" width="400" src="route.jpg" /></a>
  	</div>
	
  <div id=saisi>
   <input id="zone_saisi" type="text" value=""></input>
  </div>

  <div id=enter>
   <p>Valider</p>
  </div>

   <div id="zone_bouton">
    <div class="indice">
     <p id="indice_bouton">Indice</p>
    </div>
   </div>
	
  <script language="javascript">
var setupEvents=function(){
var contenu=document.getElementById("enter");
contenu.addEventListener("click",action);
var aide =document.getElementById("zone_bouton");
aide.addEventListener("click",reaction)
}
window.addEventListener("load",setupEvents);

var action=function(){
var eltsaisi = document.getElementById("zone_saisi").value;
if (eltsaisi=="bande") {
    alert("Bravo ! Vous avez trouvé le mot.")
} else {
    alert("Ce n'est pas le bon mot.")}

}

<!--  -->

var reaction=function(){
var eltindice=document.getElementById("zone_bouton");
eltindice.innerHTML = "Ceci est un indice"
var s = document.getElementById("indice_bouton");
s.style.position = "absolute";
var x = 100, y = 200;
s.style.left = x + "px";
s.style.top = y + "px";
}

</script>
</body>
</html>

J'ai aussi pensé a quelque chose, est-il possible d'attribuer une variable a l'élément innerHTML, donner un ID a cette variable, et attribuer des caractéristiques a cet ID via CSS ?

Laarpin

Niveau 10

14 janvier 2015 à 20:27:14

Et le dossier .css :


body{
	background: url('fond.png');
	}
	
	h1{
	border: 1px white solid;
	color: white;
	text-align: center;
	}
	
   #saisi{
    position: absolute; 
    top: 300px;  
    right: 200px;
    }

	
   .indice{
    position: absolute; 
    bottom: 400px; 
    right: 210px;
	background-color:#3ac978;
	border:2px solid #ffffff;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	padding:0px 5px;
}

	.aide{

	}
	
   .images{
    position: absolute;
	left: 50px;
	background-color: black;
	border: 4px black solid;
    cursor:pointer;
    }
	
	#enter{
	position: absolute; 
    top: 285px; 
    right: 120px;
	background-color:#3ac978;
	border:2px solid #ffffff;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	padding:0px 5px;
	}

Schiffer

Niveau 10

14 janvier 2015 à 20:38:59


   <div id="zone_bouton">
    <div class="indice">
      <span>Indice</span>
     <span id="indice_bouton"></span>
    </div>


var eltindice=document.getElementById("indice_bouton"); // et pas zone_bouton
   </div>

"Ceci est un indice" va s'afficher devant "indice" après le click

Message édité le 14 janvier 2015 à 20:40:59 par Schiffer

Laarpin

Niveau 10

14 janvier 2015 à 20:46:39

Ca marche ! Et ça s'affiche même dans le bouton.
Merci beaucoup.

Sinon, encore un tout petit point : est-il possible d'enlever "Indice", car quand je clique sur le bouton, il affiche [Indice Ceci est un indice]