Uncaught TypeError: Cannot read property 'style' of null

Résolu/Fermé

delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024 - 31 janv. 2020 à 11:51
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 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';
};

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:

Cannot read property of null traduction
Cannot read properties of undefined traduction - Meilleures réponses
Uncaught typeerror: cannot read properties of null (reading 'style') - Meilleures réponses
Uncaught syntaxerror: expected expression, got '<' ✓ - Forum Javascript
Uncaught mysqli_sql_exception: incorrect integer value: ✓ - Forum MySQL
Uncaught typeerror: cannot read properties of null (reading 'classlist') ✓ - Forum Javascript
Uncaught typeerror: cannot read properties of null (reading 'addeventlistener') ✓ - Forum Javascript
Typeerror: list.append() takes no keyword arguments - Forum Python

5 réponses

Réponse 1 / 5

Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
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

Réponse 2 / 5

jordane45 Messages postés 38419 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 février 2025 4 734
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 )

Réponse 3 / 5

delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 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>

jordane45 Messages postés 38419 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 février 2025 4 734
31 janv. 2020 à 13:05

Et le reste ?
Il faudrait la page complète

Réponse 4 / 5

delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 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

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

Posez votre question

Réponse 5 / 5

delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 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

Discussions similaires

TypeError: 'module' object is not callable

Cannot access offset of type string on string... WTF ?

TypeError: can't multiply sequence by non-int of type 'str'

FR problème de 'int' object is not subscriptable

[php] Fatal error: Unsupported operand types