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

Résolu

heliconius Messages postés 539 Date d'inscription Statut Membre Dernière intervention -
heliconius Messages postés 539 Date d'inscription Statut Membre Dernière intervention - 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:

Problème de repositionnement d'éléments par javascript
Photoshop elements gratuit - Télécharger - Retouche d'image
Telecharger javascript - Télécharger - Langages
Copier plusieurs éléments - Guide
Pdf elements gratuit - Télécharger - PDF
Impossible d'accéder à l'élément référencé par ce raccourci ✓ - Forum Windows

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 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".

heliconius Messages postés 539 Date d'inscription Statut Membre Dernière intervention 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...

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527 > heliconius Messages postés 539 Date d'inscription Statut Membre Dernière intervention

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 ;)

heliconius Messages postés 539 Date d'inscription Statut Membre Dernière intervention 142 > Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention

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.

Discussions similaires

java script error in the main process

Javascript Arrondi à 2 chiffres après la virgule

javascript:void(0);

Faire un echo dans un script JS

Impossible de copier car cet élément est trop volumineux

Votre réponse

Discussions similaires