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:

Cannot read property of null traduction
Uncaught typeerror: cannot read properties of null (reading 'classlist') - Meilleures réponses
Cannot read properties of undefined traduction - Meilleures réponses
Traduction créole guadeloupe français reverso - Forum traduction
Traduction photo gratuit - Guide
Input signal out of range ✓ - Forum Matériel & Système
Traduction créole martinique français reverso ✓ - Forum Loisirs / Divertissements
Traduction du Français en Créole Guadeloupéeen ✓ - Forum Loisirs / Divertissements

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38308 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
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é