Uncaught TypeError: Cannot read property 'style' of null

Résolu/Fermé

Nanashi17 Messages postés 193 Date d'inscription mardi 28 mars 2017 Statut Membre Dernière intervention 19 juin 2017 - 29 mai 2017 à 11:55
Nanashi17 Messages postés 193 Date d'inscription mardi 28 mars 2017 Statut Membre Dernière intervention 19 juin 2017 - 29 mai 2017 à 15:23

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 !

A voir également:

Typeerror: cannot read properties of null (reading 'style')
My reading manga ✓ - Forum Google Chrome
Style word - Guide
Problème myreadingmanga (message erreur) - Forum Google Chrome
Input signal out of range ✓ - Forum Matériel & Système
Null brawl - Forum Jeux vidéo

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
29 mai 2017 à 12:14

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,

Nanashi17 Messages postés 193 Date d'inscription mardi 28 mars 2017 Statut Membre Dernière intervention 19 juin 2017 99
Modifié le 29 mai 2017 à 12:32

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

Réponse 2 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
29 mai 2017 à 15:02

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.

Nanashi17 Messages postés 193 Date d'inscription mardi 28 mars 2017 Statut Membre Dernière intervention 19 juin 2017 99
29 mai 2017 à 15:14

Je viens de déplacer mes deux lignes mais l'erreur persiste et toujours aucun affichage.

Nanashi17 Messages postés 193 Date d'inscription mardi 28 mars 2017 Statut Membre Dernière intervention 19 juin 2017 99
29 mai 2017 à 15:23

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

Discussions similaires

Uncaught TypeError: Cannot read property 'top' of undefined

Cannot read property 'addEventListener' of null

JavaScript Cannot read property

Cannot read properties of undefined (reading 'user')

Uncaught TypeError: Cannot set property 'disabled' of null

Numéro de suivi colissimo invalide