Problème de repositionnement d'éléments par javascript

Résolu
heliconius Messages postés 584 Statut Membre -  
heliconius Messages postés 584 Statut Membre -
Bonsoir,

un petit coup de main (ou un petit conseil) ne serait pas superflu...

Objectif:
-- Quatre petits traits donnent l'accès au menu

-- Une couche (div id="menu" et z-index=10) contient le menu positionné hors de l'écran (-500px à gauche)
-- Cliquer sur l'icône menu est testé par javascript et rend le menu visible en le repositionnant à la bonne place (10px au lieu de -500px)
-- Recliquer sur cette icône le re-rend invisible en le remettant à -500px à gauche.

Problème:
Deux jours que je galère en vain avec ce script. J'ai posé des 'alert()' pour vérifier où passe le script. Si je commente les instructions de repositionnement, le script passe là où il faut (les alert() sont affichées). Si je décommente (donc repositionne), non seulement le repositionnement ne se fait pas, mais les alert() ne sont même plus affichées.

Est-ce que quelqu'un aurait une idée de l'erreur que je n'arrive pas à voir ? 

<!DOCTYPE html>
<html>

<head>
<title>Menu</title>
<style type="text/css">
#menu {
	font-family: times;
	font-size: 14pt;
	font-style: italic;
	width: 100px;
	border: 1px solid red;
	background-color: #FFFF40;
	opacity: 0.8;
	padding: 10px;
	z-index: 10;
	position: absolute;
	// T:30; L:10
	top: 30px;
	left: -500px;
}
</style>
<script language="javascript" type="text/javascript">

var status = 0;  // 0: caché ou 1: visible
var elem   = ''; // document.getElementById('menu')

function mshow(elem) {
	alert('Dans mshow()');  // Pour verif
	status = 1;
	alert(status);          // Pour verif
	//elem.style.left=10px;
}
function mhide(elem) {
	alert('Dans mhide()');  // Pour verif
	status = 0;
	alert(status);          // Pour verif
	//elem.style.left=-500px;
}
function showhide(){
	alert('Dans showhide()'); // Pour verif
	alert(status);            // Pour verif
	elem = document.getElementById('menu');
	if(status == 0) {
		alert('Dans le if de showhide()');    // Pour verif
		// Afficher
		mshow(); }
	else {
		alert('Dans le else de showhide()'); // Pour verif
		// Cacher
		mhide();
	}
}
</script>
</head>

<body>
<!-- 4 petits traits horizontaux -->
<img src="menu.jpg" alt="icone menu" onclick="javascript:showhide()" />

<div id="menu">
  <!-- Menu de test -->
  <a href="javascript:alert('Choix 1')">Choix 1</a><br/>
  <a href="javascript:alert('Choix 2')">Choix 2</a><br/>
  <a href="javascript:alert('Choix 3')">Choix 3</a><br/>
  <a href="javascript:alert('Choix 4')">Choix 4</a><br/>
  <a href="javascript:alert('Choix 5')">Choix 5</a><br/>
</div>

</body>

</html>

Merci pour votre aide.
Configuration: Windows / Firefox 101.0
A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2845 Statut Membre 527
 
Bonsoir,

Utilise console.log() à la place de alert() et ouvre la console de ton navigateur.
Tu devrais voir une erreur "elem is undefined" qui indique que tu as oublié de passer le paramètre elem lors de tes appels aux fonctions mshow() et mhide().
Tu as aussi des erreurs de syntaxe sur le code commenté dans ces fonctions : il manque des guillemets pour définir les valeurs "10px" et "-500px".
0
heliconius Messages postés 584 Statut Membre 142
 
Merci pour ta réponse. Effectivement j'ai oublié de passer elem à l'appel des fonctions mshow() et mhide().
mais ayant corrigé, ça ne change rien. Je ne comprends pas...
0
Pitet Messages postés 2845 Statut Membre 527 > heliconius Messages postés 584 Statut Membre
 
Il faut utiliser des guillemets pour définir les valeurs de style avec des unités en pixels : 
elem.style.left = "-500px";

https://jsfiddle.net/m43u61fx/
Tu devrais utiliser un éditeur de code avec un analyseur syntaxique pour éviter ces erreurs ;)
1
heliconius Messages postés 584 Statut Membre 142 > Pitet Messages postés 2845 Statut Membre
 
Merci 1000 fois.
Et je vais suivre ton conseil pour l'éditeur de code. Car lorsque tu es parti pour ne pas voir l'erreur, tu as beau passer 100 fois dessus, tu ne la vois pas. Avec la couleur, ça se verrait tout de suite.
Encore une fois, merci.
Problème résolu.
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses
a javascript error occurred in the main process
Kytsu1241 -
lolomusic667 -

1 réponse