problème getAttribute et IE ?

Sujet résolu

10 janvier 2009 à 13:18:34

Je cherche ce qui ne va pas dans mon code pour IE, mais je ne vois pas trop le problème. Serait-ce une incompatibilité avec getAttribute ? Mais si oui, comment contourner ça ?

A la base, j'ai un input avec un id "startpause", le type "button" et une value "DEMARRER"

plus loin, intervient ce code :

var attribut = this.getAttribute("value");
if (attribut=="DEMARRER")
	{
		nouvellePartie();
		this.setAttribute("value","PAUSE");
	}
	else
	{
		this.setAttribute("value","CONTINUER");
		pause = true;
	}
}

Nesk

10 janvier 2009 à 16:17:46

Es-tu sûr que le this cible bien ton bouton ? Vérifie en utilisant un this.value classique.

Mr Grille-Pain

10 janvier 2009 à 22:36:35

euh, a priori je ne pense pas, puisque ça fonctionne sur les autres navigateurs, enfin j'essaierai dès que possible

Nesk

11 janvier 2009 à 0:16:17

Ah oui, excuse-moi, j'avais en tête que ça ne fonctionnait avec aucun navigateur

.

As-tu essayé de faire un alert() avec la valeur de la variable attribut pour voir si tu as bien récupéré la bonne valeur ? Parce que si je regarde selfHTML, c'est écrit que getAttribute() fonctionne dès IE 5...

Mr Grille-Pain

11 janvier 2009 à 12:02:20

Alors, je viens d'essayer avec un alert, et en fait, il n'est pas lu. Quand je clique sur le bouton, IE m'indique "erreur sur la page", et apparemment cette erreur intervient avant le alert que j'ai mis juste après la création de ma variable attribut.

Ca parait renforcer la théorie du problème dans getAttribute, mais si c'est pris en charge dès IE5, je ne sais pas trop ce qui ne va pas o_O

Merci en tout cas pour ton aide ! Si tu as d'autres idées, n'hésite pas !

Golmote

11 janvier 2009 à 12:17:08

Je viens de tester getAttribute sur IE7... ça marche très bien.

Essaie avec ce code tu verras :

<head>
<script type="text/javascript">
function test() {
obj = document.getElementById("inp");
alert(obj.getAttribute("value")); // yop
obj.setAttribute("value","autre");
alert(obj.getAttribute("value")); // autre
}
</script>
</head>
<body onload="test();">
<input type="text" id="inp" value="yop" />
</body>

T'es sûr que ton erreur ne vient pas d'ailleurs dans le code ? Montre l'intégralité, éventuellement.

Nesk

11 janvier 2009 à 14:03:14

Citation : Golmote

T'es sûr que ton erreur ne vient pas d'ailleurs dans le code ? Montre l'intégralité, éventuellement.

Avoir le code complet serait plus pratique pour nous oui

Mr Grille-Pain

11 janvier 2009 à 19:19:06

Ok, je vais vous mettre ça. Enfin, je n'ai sélectionné que le code qui précède l'erreur, histoire de vous épargner le roman qui suit !
Merci en tout cas ! J'espère qu'il est clair.
Je tiens à préciser qu'une contrainte de cet exercice est de ne pas utiliser de html au delà de la balise body, c'est pour ça que toutes les balises sont créées avec des createElement(), suivi de multiples setAttribute()

var boutonStart; 
var ok = null;
var niveau;
var formeAleatoire;
var pause = false;
var tailleCase = 20; 
var nbCaseX = 14;
var nbCaseY = 26;
var coefScore1, coefScore2, coefScore3;

// Cette fonction permet de de n'utiliser qu'une ligne de code pour prendre en compte addEventListener et AttachEvent	
function addListener(element, baseName, handler) 
{
	if (element.addEventListener)
	{
		element.addEventListener(baseName,handler,false);
	}
	else if (element.attachEvent)
	{
		element.attachEvent("on"+baseName,handler);
	}
} // fin addListener
			
// On appelle 2 fonctions au chargement de la page. : la 1ère pour afficher le formulaire de sélection d'options et l'autre pour permettre la prise en charge des touches du clavier.
addListener(window,"load",init);
addListener(window,"click",permettreActions);
						
// Permet de prendre en compte les actions sur les touches du clavier
function permettreActions()
{
	document.getElementById("champsaisie").focus(); 
	addListener(document.getElementById("champsaisie"),"keydown",enfonceTouche);	
} // fin permettreActions
			
// Fonction lancée au chargement de la page. 
function init()
{
		//--- CREATION DU FORMULAIRE DE CHOIX D OPTIONS DE JEU ---
			
		// options de type de pièces
	var body = document.getElementsByTagName("body");
	var choixOptions = document.createElement("div");
	choixOptions.setAttribute("id","choixoptions");
	for (var i=0; i<2; i++)
	{
		var typePiece = document.createElement("p");
		addListener(typePiece,"click",choixTypePiece);
		var texteTypePiece = document.createTextNode(("Type de pièces ")+(i+1));
		typePiece.appendChild(texteTypePiece);
		choixOptions.appendChild(typePiece);	
		body[0].appendChild(choixOptions);
	}		
	jeu();
	
		// Bouton affichant la grille du tetris	lorsqu'actionné	
	var formJeu = document.createElement("form");
	var boutonJeu = document.createElement("input");
	boutonJeu.setAttribute("type","button");
	boutonJeu.setAttribute("value","JOUER");
	formJeu.appendChild(boutonJeu);
	choixOptions.appendChild(formJeu);
	addListener(boutonJeu,"click",revelerJeu);
} // fin init	

// permet de sélectionner le type de piece avec lequel on souhaite jouer		
function choixTypePiece(event)
{
	var event = event || window.event,
    p = event.target || event.srcElement;

	
	p.style.background="blue";
	var paragraphes = document.getElementsByTagName('p');
	if (paragraphes[0]==p)
	{
		formeAleatoire = false;
		nombrePieces();
		paragraphes[1].style.background="none";
		coefScore1 = parseInt(1);
	}
	else if (paragraphes[1]==p)
	{
		formeAleatoire = true;
		nombrePieces();
		paragraphes[0].style.background="none";
		coefScore1 = parseInt(2);
	}
} // fin choixTypePiece

// Cette fonction masque le formulaire de choix d'options et révèle le corps du Tetris
function revelerJeu()
{
	var divJeu = document.getElementById("tetris");
	divJeu.setAttribute("class","");
	divJeu.setAttribute("className","");
	var divOptionsJeu = document.getElementById("choixoptions");
	divOptionsJeu.setAttribute("class","invisible");
	divOptionsJeu.setAttribute("className","invisible");
}
		
// Affiche la grille du jeu
function jeu()
{	
		// --- Structure HTML du document --- 
	var body = document.getElementsByTagName("body");
				
		//Formulaire capturant les saisies clavier (touches fléchées et entrée)
	var formSaisieClavier = document.createElement("form");
	formSaisieClavier.setAttribute("id","saisieclavier");
	var inputChampSaisie = document.createElement("input");
	inputChampSaisie.setAttribute("id","champsaisie");
	inputChampSaisie.setAttribute("type","text");
	formSaisieClavier.appendChild(inputChampSaisie);
	body[0].appendChild(formSaisieClavier);
			
		//conteneur du Tetris, divisé en deux parties : la grille, le menu
	var divTetris = document.createElement("div");
	divTetris.setAttribute("id","tetris");
	divTetris.setAttribute("class","invisible");
	divTetris.setAttribute("className","invisible");
	var divContourGrille = document.createElement("div");
	divContourGrille.setAttribute("id","contourgrille");
	var divMenu = document.createElement("div");
	divMenu.setAttribute("id","menu");
	divTetris.appendChild(divContourGrille);
	divTetris.appendChild(divMenu);
	body[0].appendChild(divTetris);
						
		//Titre
	var h1 = document.createElement("h1");
	var texteTetris = document.createTextNode("TETRIS");
	h1.appendChild(texteTetris);
	divMenu.appendChild(h1);
	
		// Affichage des pieces suivantes
	var divSuivant = document.createElement("div");
	divSuivant.setAttribute("id","suivant");
	divMenu.appendChild(divSuivant);
	
		// Grille du jeu
	contourGrille = document.getElementById("contourgrille");
	prochain = document.getElementById("suivant");
	divContourGrille.style.width = tailleCase * nbCaseX;
	divContourGrille.style.height = tailleCase * nbCaseY;
	var tableGrille = document.createElement("table");
	tableGrille.setAttribute("class","grille");
	tableGrille.setAttribute("className","grille");
	var tbody= document.createElement("tbody");
	tableGrille.appendChild(tbody);
	tableGrille.width = tailleCase * nbCaseX;
	tableGrille.height = tailleCase * nbCaseY;
	for (var i=0;i<nbCaseY;i++)
	{
		var tr = document.createElement("tr");
		for (var j=0;j<nbCaseX;j++)
		{
			var td = document.createElement("td");
			td.setAttribute("class","casejeu");
			td.setAttribute("className","casejeu");
			var nbsp = document.createTextNode(" ");
			td.appendChild(nbsp);
			tr.appendChild(td);
		}
		tableGrille.lastChild.appendChild(tr);
	}
	divContourGrille.appendChild(tableGrille);
	
		//Formulaire affichant les statistiques en temps réel
	var formStatistique = document.createElement("form");
	formStatistique.setAttribute("id","statistique");
	var inputStartPause = document.createElement("input");
	inputStartPause.setAttribute("id","startpause");
	inputStartPause.setAttribute("type","button");
	inputStartPause.setAttribute("value","DEMARRER");
	var pNiveau = document.createElement("p");
	var texteNiveau = document.createTextNode("Niveau : ");
	var inputNiveau = document.createElement("input");
	inputNiveau.setAttribute("id","niveau");
	inputNiveau.setAttribute("class","stat");
	inputNiveau.setAttribute("className","stat");
	inputNiveau.setAttribute("type","text");
	inputNiveau.setAttribute("value","0");
	var pLigne = document.createElement("p");
	var texteLigne = document.createTextNode("Ligne : ");
	var inputLigne = document.createElement("input");
	inputLigne.setAttribute("id","ligne");
	inputLigne.setAttribute("class","stat");
	inputLigne.setAttribute("className","stat");
	inputLigne.setAttribute("type","text");
	inputLigne.setAttribute("value","0");
	var pScore = document.createElement("p");
	var texteScore = document.createTextNode("Score : ");
	var inputScore = document.createElement("input");
	inputScore.setAttribute("id","score");
	inputScore.setAttribute("class","stat");
	inputScore.setAttribute("className","stat");
	inputScore.setAttribute("type","text");
	inputScore.setAttribute("value","0");
	pNiveau.appendChild(texteNiveau);
	pNiveau.appendChild(inputNiveau);
	pLigne.appendChild(texteLigne);
	pLigne.appendChild(inputLigne);
	pScore.appendChild(texteScore);
	pScore.appendChild(inputScore);
	formStatistique.appendChild(inputStartPause);
	formStatistique.appendChild(pNiveau);
	formStatistique.appendChild(pLigne);
	formStatistique.appendChild(pScore);
	divMenu.appendChild(formStatistique);	
						
		// --- Lancement du jeu ---		
	boutonStart = document.getElementById("startpause");
	addListener(boutonStart,"click",startPause);
} // fin jeu
			
//Permet de prendre en compte les actions sur le bouton commencer/pause/continuer
function startPause()
{
	clearTimeout(ok);
	if (pause) 
	{
		pause=false;
		partie();
		this.setAttribute("value","PAUSE");
	}
	else
	{
		var attribut = this.getAttribute("value");
		alert(attribut);
		if (attribut=="DEMARRER")
		{
			nouvellePartie();
			this.setAttribute("value","PAUSE");
		}
		else
		{
			this.setAttribute("value","CONTINUER");
			pause = true;
		}
	}
} // fin startPause

Golmote

11 janvier 2009 à 20:55:50

Ah oui en effet y'a de la lecture... un peu trop pour moi

Mets des alert() à intervalles régulier pour vérifier jusqu'où tout fonctionne...

Nesk

11 janvier 2009 à 21:05:21

Hum... j'ai la flemme aussi x)

Comme la dit Golmote, essaye de suivre les valeurs des variables concernées pour voir à partir d'où ça plante

Mr Grille-Pain

11 janvier 2009 à 22:00:48

Oui

je comprends bien que ça paraisse un peu trop long. J'ai fait ce que vous avez dit avec les alert partout, je devrais prendre l'habitude de fonctionner comme ça...
Mais bon vous n'allez pas aimer la réponse que j'ai à fournir : c'est vraiment au niveau du getAttribute() que tout bloque. Tout le reste fonctionne parfaitement (et j'ai vraiment pas lésiné sur la quantité de tests) o_O

Golmote

11 janvier 2009 à 22:11:36

T'aurais pas un lien vers la page, pour tester ?

Mr Grille-Pain

11 janvier 2009 à 22:35:16

Je te l'ai mis à l'adresse suivante : http://agencegrillepain.free.fr/for_us/Tetris_G.html
Tu tombes sur une sorte de petit formulaire rudimentaire, il faut bien sélectionner une option par catégorie sinon ça ne fontionnera pas bien

J'ai encore pas mal d'améliorations à faire à ce niveau

Golmote

11 janvier 2009 à 22:46:12

Je viens de remarquer que tu as deux variables startPause déclarées dans ton code.

L'une, c'est ta fonction. ligne 389
L'autre, c'est le bouton... ligne 563

Le problème vient peut-être de là... Change le nom de ta fonction et l'appel.

Mr Grille-Pain

11 janvier 2009 à 23:05:08

Ca n'est hélas pas ça, mais au moins j'aurai clarifié mon code grâce à ta remarque !
J'ai l'impression d'être impoli à force de répondre par la négative

Golmote

11 janvier 2009 à 23:11:24

Quand tu fais un alert(this) au tout début de ta fonction (qui s'appelle comment maintenant ?

) ? Qu'est-ce que t'affiche IE ?

Mr Grille-Pain

11 janvier 2009 à 23:17:50

en tout début de ma fonction startPause (c'est en fait la variable du bouton qui a changé de nom : boutonDemarrer

), si je mets donc ce alert(this);, ça me renvoit [object]

Golmote

12 janvier 2009 à 0:11:29

et avec alert(this.value), tu récupères quoi ?

Mr Grille-Pain

12 janvier 2009 à 1:31:03

j'obtiens undefined

Golmote

12 janvier 2009 à 11:16:09

Eh mais... c'est pas normal que tu récupères Object... ... vu que normalement c'est un Input ! Tu devrais récupérer un HTMLInputElement.

Moi je pense que c'est le this qui réfère pas au bon truc.

Mr Grille-Pain

12 janvier 2009 à 13:54:49

En effet ! Je ne comprends pas trop pourquoi, sachant que ça fonctionnait sur les autres navigateurs, mais j'ai remplacé le this par une variable faisant appel à mon bouton, et ça fonctionne !

Bon, ça ne veut pas dire que mon script fonctionne sur internet explorer, mais je vais essayer d'y réfléchir par moi meme, dans un premier temps (sinon, à bientôt :-°

)
Je te remercie bôcoup, puis merci aussi à Nesquik69, puisque finalement, j'aurais dû plus me pencher sur sa 1ère réponse

Nesk

12 janvier 2009 à 15:43:06

Haha, j'étais pas dans le faux finalement