Cannot set properties of null (setting 'classList')

Résolu/Fermé

La poste

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 - Modifié le 29 janv. 2022 à 11:11
firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 - 29 janv. 2022 à 12:10

Bonjour,

Depuis quelque jour j'ai un probleme javascript qui est apparue alors que quelque jour avant il n'y avait pas cette erreur.
Je ne comprend pas d'ou elle vient. J'ai essaye avec plusieur navigateur Chrome, Firefox, Edge.

voici l'erreur :


Uncaught TypeError: Cannot set properties of null (setting 'classList')
    at quit_div (script.js:65:26)
    at search_div (script.js:56:5)
    at HTMLAnchorElement.onclick (VM915 :24:69)

voici le code javascript :

let div_search = document.querySelector('.search-user');
let div_msg = document.querySelector('.message-user');
function search_div(){
    quit_div();
    div_search.classList='search-user';
}
function msg_div(){
    quit_div();
    div_msg.classList='message-user';
}

function quit_div(){
    div_search.classList = 'search-user none';
    div_msg.classList = 'message-user none';
}

et le code html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="message-user none">
    <ion-icon name="close-outline" onclick="document.querySelector('.message-user').classList='message-user none';" class="quit"></ion-icon>
    <div class="list-user-msg">
        <div class="search-bar-div">
            <input type="search" class="search-bar-msg" onkeyup=""><!-- https://www.w3schools.com/php/php_ajax_php.asp -->
            <ion-icon name="search-outline" class="search-btn-msg"></ion-icon>
        </div>
        <div class="msg-list">
               <div class="msg-case">
                <a href="#?username=" class="click-case-msg">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Firefox_logo%2C_2019.svg/640px-Firefox_logo%2C_2019.svg.png">
                    <h1>Fire Fox</h1>
                    <ion-icon name="send-outline" class="send-outline"></ion-icon>
                </a>
                </div>
        </div>
    </div>
    <div class="msg-box">
        <div class="box-msg-sending">
            <input type="text">
            <button><ion-icon name="paper-plane-outline"></ion-icon></button>
        </div class="msg-send-box">
            <div class="msg-send-to">
                <input type="text" value="FireFox" disabled>
                <p>by firefox</p>
            </div>
            <div class="msg-send-my">
                <input type="text" value="Chrome" disabled>
                <p>by chrome</p>
            </div>
        </div>
    </div>
</div>
<div class="search-user none">
    <div class="search-bar-div">
        <input type="search" class="search-bar" autocomplete="off" id="search-bar" disabled> 
        <ion-icon name="search-outline" class="search-btn"></ion-icon>
    </div>
    <div class="list-search-user div-user">
            <div class="user-case">
            <a href="#" class="click-case">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Firefox_logo%2C_2019.svg/640px-Firefox_logo%2C_2019.svg.png">
                <h1>Fire Fox</h1>
               <ion-icon name="send-outline" class="send-outline"></ion-icon>
            </a>
        </div>
    </div>
    <div class="info-user-case div-user none" id="info-user-case">

    </div>
    <ion-icon name="close-outline" onclick="document.querySelector('.search-user').classList='search-user none';" class="quit"></ion-icon>
</div>
</body>
</html>

A voir également:

Uncaught typeerror: cannot read properties of null (reading 'classlist')
Uncaught typeerror: cannot set properties of null (setting 'onclick') - Meilleures réponses
Cannot read property of null traduction - Meilleures réponses
My reading manga ✓ - Forum Google Chrome
Bug site web - Forum Google Chrome
A disk read error occurred ✓ - Forum Windows
Input signal out of range ✓ - Forum Matériel & Système
Cannot access offset of type string on string - Forum PHP

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
29 janv. 2022 à 11:50

Bonjour,

Pour commencer.. le mot clé "let" servant à déclarer une variable .. a une portée restreinte de celle ci dans le code...
A la place.. utilises le mot clé "var", ou, pour ton besoin actuel, les déclarer en tant que constante via le mot clé "const"

Et bien entendu, pour que ça fonctionne.. il faut que ton JS soit bien chargé APRES le contenu HTML de ta page.

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
29 janv. 2022 à 12:10

Merci, je viens de comprendre je le declare au debut du code

Discussions similaires

Uncaught TypeError: Cannot read property 'top' of undefined

Numéro de suivi colissimo invalide

.properties

Problème avec ants.gouv.fr pour télécharger fichier en pdf

access denied

Colis VOVA dédouanement complété

Discussions similaires

Newsletters