Uncaught TypeError: Cannot read property 'style' of null [Résolu]

Signaler
Messages postés
119
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
20 février 2020
-
delaville81
Messages postés
119
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
20 février 2020
-
Bonjour,
Je rencontre l'erreur : Uncaught TypeError: Cannot read property 'style' of null
Je ne comprends pas bien car je l'utilise le même code ailleurs et ça fonctionne.
<input type="hidden" class="" name="id_sujet" value="<?php echo $suj['id_sujet']; ?>"> 
<input type="text" class="coment" name="texte_com" value="" placeholder="Votre commentaire..."> 
<a class="btn_input"><i class="far fa-image "></i><span class="name">Photos</span></a>
<input type="file" class="imgCom" id="imgFile_<?php echo $suj['id_sujet'];?>" name="img[]" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFileCom(event,<?php echo $suj['id_sujet'];?>)">
<div class="img_com" id="divCom_<?php echo $suj['id_sujet'];?>'"> 
        <img src="" id="outputCom_<?php echo $suj['id_sujet'];?>" class="img-fluid img-min" alt="">
        <a class="btn_del" onclick="delFileCom(event,'<?php echo $suj['id_sujet'];?>')"><i class="fas fa-trash-alt del" id="trash_<?php echo $suj['id_sujet'];?>"></i></a>
 </div>


en JS
var loadFileCom = function(event,idImg) {
  var reader = new FileReader();
  reader.onload = function() {
    event.target // l'élément input
      .nextElementSibling // l'élément div
      .children[0] // le 1er enfant du div, soit l'img
      .src = this.result;
    };
  reader.readAsDataURL(event.target.files[0]);
  var trash = document.getElementById('trash_'+idImg);
  trash.style.display = 'block';
  var divCom = document.getElementById('divCom_'+idImg);
  divCom.style.display = 'block';
};


et
var delFileCom = function(event,idImg) {
  var outputCom = document.getElementById('outputCom_'+idImg);
  outputCom.src = '';
  var trash = document.getElementById('trash_'+idImg);
  trash.style.display = 'none';
  imgFile = document.getElementById('imgFile_'+idImg);
  imgFile.value = "";
  var divCom = document.getElementById('divCom_'+idImg);
  divCom.style.display = 'none';
};


L'erreur se produit sur le
divCom.style.display = 'block';
divCom.style.display = 'none';


Merci de votre aide

Configuration: Macintosh / Safari 12.1.1

5 réponses

Messages postés
3571
Date d'inscription
jeudi 16 juin 2005
Statut
Membre
Dernière intervention
20 février 2020
934
Bonjour,

Dans ton php, tu as :
id="divCom_<?php echo $suj['id_sujet'];?>'"

Regarde bien : l'id de tes div contient un ' final en trop.

Xavier
Messages postés
27650
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 février 2020
2 133
Bonjour,

A quel moment est exécuté ton code JS ?
Les éléments HTML ciblés existent déjà dans la page ?
As tu bien UN seul élément dans ta page qui utilise cet ID ?


Moi je commencerai par regarder ce que contiennent mes différentes variables (via des console.log par exemple)
console.log('idImg',idImg);
var divCom = document.getElementById('divCom_'+idImg);


Ensuite, si tu ne trouves pas, merci de nous montrer le code html généré de ta page (c'est à dire que tu affiches ta page dans ton navigateur, puis tu fais un CTRL+U afin d'en afficher le code source et tu nous le colles ici )



Messages postés
119
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
20 février 2020

Comme demandé, voici le code généré

<form action="">
       <input type="hidden" class="" name="id_sujet" value="6"> 
       <input type="text" class="coment" name="texte_com" value="" placeholder="Votre commentaire..."> 
        <a class="btn_input"><i class="far fa-image "></i><span class="name">Photos</span></a>
        <input type="file" class="imgCom" id="imgFile_6" name="img[]" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFileCom(event,6)">
 <div class="img_com" id="divCom_6'"> 
         <img src="" id="outputCom_6" class="img-fluid img-min" alt="">
          <a class="btn_del" onclick="delFileCom(event,'6')"><i class="fas fa-trash-alt del" id="trash_6"></i></a>
</div>
<div>
      <input type="submit" name="publier_com" class="btn btn-primary btn-sm publier_com"        value="Publier">
</div>
</form>    

jordane45
Messages postés
27650
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 février 2020
2 133
Et le reste ?
Il faudrait la page complète
Messages postés
119
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
20 février 2020

Il ya 800 lignes et des données perso.
Je ne peux pas les envoyer.
Le code est dans une boucle et se répète pour chaque sujets postés
Messages postés
119
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
20 février 2020

Merci Reivax962,
C'était bien ça le problème. Maintenant, ça fonctionne parfaitement.
Une deuxième paire d'yeux est toujours bonne à emprunter

Merci de ton aide