Sujet Précédent Sujet Suivant

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

Résolu/Fermé
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 13 juin 2022 à 22:26
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 13 juin 2022 à 23:55
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 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié le 13 juin 2022 à 23:08
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 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 140
13 juin 2022 à 23:14
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 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525 > heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023
13 juin 2022 à 23:32
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 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 140 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
13 juin 2022 à 23:55
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

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
webcame eton et 838b
raouf74 -
emma -

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

18 réponses
Impossible de copier car cet élément est trop volumineux
Alan_Cohen -
Utilisateur anonyme -

9 réponses