Uncaught TypeError: Cannot read property 'style' of null

[Résolu/Fermé]
Signaler
Messages postés
193
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
19 juin 2017
-
Messages postés
193
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
19 juin 2017
-
Bonjour,

Je suis en train de transformer une application web en un plugin Wordpress afin de gérer ma base de données.

Pour cela j'ai créé une interface graphique qui doit s'intégrer dans ma page HTML malheureusement cette interface ne s'affiche pas mais j'ai bien accès à ma page.

Pour diagnostiquer l'erreur j'ai utilisé l'outil de développement de mon navigateur et ce dernier m'affiche l'erreur: Uncaught TypeError: Cannot read property 'style' of null
at displayLaunchBar (gestion.php:346)
at loadDesktopConfig (gestion.php:325)
at onload (gestion.php:71)

Tout cela correspond à mon code Javascript malheureusement je ne m'y connais pas du tout en Javascript alors si quelqu'un pouvez m'aider ce serait vraiment gentil.

Je vous laisse mon code:

<body onLoad="loadDesktopConfig()" onmousemove="MoveWindow(event)" >


function loadDesktopConfig()
{
	displayLaunchBar();
}


function displayLaunchBar()
{
	var ajax = getAjax();	 
	ajax.open("POST", "../Inscriptions/loadLaunchBar.php", true); 
	ajax.onreadystatechange = updateContent(ajax,'launchBarDiv');	
	ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 	var launchBar=getDomObject('launchBarDiv');
 	launchBar.style.visibility="visible";
 	
	ajax.send('default');
}


Merci d'avance pour vos réponses !

2 réponses

Messages postés
2581
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
18 octobre 2021
464
Salut,

D'après le message d'erreur, la variable js launchBar serait égale à null, la fonction getDomObject() n'aurait donc pas réussi à récupérer l'élément html.

Quel est le code de la fonction getDomObject() ?
Comment est défini l'élément "launchBar" en html ?

Si l'élément lauchnBar possède un identifiant (<div id="launchBarDiv">), tu pourrais remplacer la fonction getDomObject() par un getElementById :
var launchBar = getElementById('launchBarDiv');
launchBar.style.visibility = "visible";


Bonne journée,
Messages postés
193
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
19 juin 2017
93
Bonjour, merci de ta réponse, voici le code de la fonction getDomObject:
function getDomObject(domObjectId)
{
 
 if (document.getElementById)
 {
  var domObject=document.getElementById(domObjectId); 
  return domObject;
 }
 if (document.all && !document.getElementById)
 {
  var domObject=document.all[domObjectId];
  return domObject;
 }
 if (document.layers)
 {
  var domObject=document.layers[domObjectId];
  return domObject;
 }
 return NULL;
}


Et voici ma LaunchBar :
function loadLaunchBar()
{
 /*basiquement un tableau sur une ligne*/
 echo"<table class=\"launchBar\">";
  echo"<tbody>";
   echo"<tr>";
    echo"<td class=\"pointeGaucheLB\">";
    echo"</td>";
    /*configuration*/
    echo"<td class=\"blocLB\" >";
    echo'<img id="imgConfig" src="https://arpae.info/wp-admin/upload.php?item=19454" width="25" height="25" border="0" onMouseOver="obtienFocusLB(this,'Configuration')" onMouseOut="perdFocusLB(this)" onClick="openConfigBox()">';
    echo"</td>";
    
    /*afficher fenetre colonnes*/
    echo"<td class=\"blocLB\" >";
    echo"<img id=\"imgConfig\" src=\"/home/arpaeinfbf/wp-admin/Plugin_ARPAE/Inscriptions/images_admin/virusDetected.png\" width=\"25\" height=\"25\" border=\"0\" onMouseOver=\"obtienFocusLB(this,'Afficher Fenetre Colonnes')\" onMouseOut=\"perdFocusLB(this)\" onClick=\"alternerAffichageConfiguration(0)\"\">";
    
    /*afficher fenetre filtres*/
    echo"<td class=\"blocLB\" >";
    echo"<img id=\"imgConfig\" src=\"/home/arpaeinfbf/wp-admin/Plugin_ARPAE/Inscriptions/images_admin/virusDetected2.png\" width=\"25\" height=\"25\" border=\"0\" onMouseOver=\"obtienFocusLB(this,'Afficher Fenetre Filtres')\" onMouseOut=\"perdFocusLB(this)\" onClick=\"alternerAffichageConfiguration(1)\"\">";
    
    /*ajouter colonne*/
    echo"<td class=\"blocLB\" >";
    echo"<img id=\"imgConfig\" src=\"/home/arpaeinfbf/www/wp-admin/Plugin_ARPAE/Inscriptions/images_admin/viewRight.png\" width=\"25\" height=\"25\" border=\"0\" onMouseOver=\"obtienFocusLB(this,'Visualiser')\" onMouseOut=\"perdFocusLB(this)\" onClick=\"loadSection(2)\"\">";
    /*rechercher*/
    echo"<td class=\"blocLB\" >";
    echo"<img id=\"imgConfig\" src=\"/home/arpaeinfbf/www/wp-admin/Plugin_ARPAE/Inscriptions/images_admin/xmag.png\" width=\"25\" height=\"25\" border=\"0\" onMouseOver=\"obtienFocusLB(this,'Rechercher')\" onMouseOut=\"perdFocusLB(this)\" onClick=\"loadSection(0)\"\">";
    echo"</td>";
    
    /*trier*/
    echo"<td class=\"blocLB\" >";
    echo"<img id=\"imgConfig\" src=\"/home/arpaeinfbf/www/wp-admin/Plugin_ARPAE/Inscriptions/images_admin/cal.png\" width=\"25\" height=\"25\" border=\"0\" onMouseOver=\"obtienFocusLB(this,'Trier par')\" onMouseOut=\"perdFocusLB(this)\" onClick=\"loadSection(1)\"\">";
    echo"</td>";
    
    /*appliquer*/
    echo"<td class=\"blocLB\" >";
    echo"<img id=\"imgConfig\" src=\"/home/arpaeinfbf/www/wp-admin/Plugin_ARPAE/Inscriptions/images_admin/reload.png\" width=\"25\" height=\"25\" border=\"0\" onMouseOver=\"obtienFocusLB(this,'Lancer requete')\" onMouseOut=\"perdFocusLB(this)\" onClick=\"appliquer(),hideBox('fenetreConfigDiv')\"\">";
    echo"</td>";
    echo"<td class=\"pointeDroiteLB\">";
    echo"</td>";
   echo"</tr>";
  echo"</tbody>";
 echo"</table>";
}


Et oui l'élément possède bien un <div id=\"launchBarDiv\"> que j'affiche dans une fonction avec echo
Messages postés
2581
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
18 octobre 2021
464
Le problème semble venir du fait que tu n'attends pas le retour de la réponse ajax pour changer le style.

Puisque la launchBar est affichée à la suite de la requête ajax (via onreadystatechange), il faut également faire les modifications de style après l'affichage. Actuellement tu fais les modifications de style avant même que la requête soit envoyée (ajax.send).

Déplace les deux lignes
var launchBar=getDomObject('launchBarDiv'); launchBar.style.visibility="visible";
à la fin de ta fonction updateContent() afin de modifier le style après avoir afficher la launchBar.
Messages postés
193
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
19 juin 2017
93
Je viens de déplacer mes deux lignes mais l'erreur persiste et toujours aucun affichage.
Messages postés
193
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
19 juin 2017
93
Je viens de me rendre compte que le launchBar dans lunchBar.style.visibility venait de mon CSS:

.launchBar{
	padding:0px;
	border-style:hidden;
	border-spacing:0px;
	border-collapse:collapse;
}