Uncaught TypeError: Cannot read property 'style' of null

Résolu/Fermé
delaville81 Messages postés 185 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 17 janvier 2024 - 31 janv. 2020 à 11:51
delaville81 Messages postés 185 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 17 janvier 2024 - 31 janv. 2020 à 15:25
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

A voir également:

5 réponses

Reivax962 Messages postés 3671 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 009
31 janv. 2020 à 14:34
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
1
jordane45 Messages postés 38041 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 février 2024 4 622
31 janv. 2020 à 11:59
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 )



0
delaville81 Messages postés 185 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 17 janvier 2024
31 janv. 2020 à 12:25
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>    

0
jordane45 Messages postés 38041 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 février 2024 4 622
31 janv. 2020 à 13:05
Et le reste ?
Il faudrait la page complète
0
delaville81 Messages postés 185 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 17 janvier 2024
31 janv. 2020 à 14:17
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
delaville81 Messages postés 185 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 17 janvier 2024
31 janv. 2020 à 15:25
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
0