Uncaught TypeError: Cannot read property 'style' of null

Résolu
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


--
Bien PHPment et MySQLment
Delaville

5 réponses

  1. 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
    1. 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
      1. 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
        1. 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
          1. Modérateur
            Et le reste ?
            Il faudrait la page complète
            0
        2. Modérateur
          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