无法读取未定义的属性“添加”

Question

这是console.log 。大家好，我的JavaScript代码有问题。 我单击按钮时尝试制作动画，但出现此错误：无法读取未定义的属性“ add”，我不知道这是什么问题！

import {
Util

}来自“ ./Util.js”

export class Introduction {

    /**
     * Classe permettant de créer et d'animer une introduction
     * @param {object} o - contient l'ensemble des mots d'intro
     * @param {DOMElement} elementParent - Conteneur de l'animation
     * @param {function} fonction - l'adresse de la fonction à exécuter après l'animation

     }}
     */

    constructor(o, elementParent, fonction) {
        //Récupérer les valeurs passées en paramètre            
        this.titrePrincipal = o.titrePrincipal;
        this.titreSecondaire = o.titreSecondaire
        this.titreTernaire = o.titreTernaire
        this.description = o.description
        this.elmParent = elementParent
        this.integrerIntro()
        this.fonction = fonction
    }


    integrerIntro() {
        /* Création des élément DOM qui seront animés. 
        Les éléments seront intégré dans le conteneur elmParent
        */
        console.log('introduction')
        let elmConteneur = this.creerElement(this.elmParent,
            'section',
            '',
            'introduction')

        let elmPrincipale = this.creerElement(elmConteneur,
            'div',
            this.titrePrincipal,
            'rectangle')

        let elmSecondaire = this.creerElement(elmConteneur,
            'div',
            this.titreSecondaire,
            'rectangle')


        let elmTernaire = this.creerElement(elmConteneur,
            'div',
            this.titreTernaire,
            'rectangle')

        let elmDescription = this.creerElement(elmConteneur,
            'div',
            this.description,
            'rectangle')

        let elmBouton = this.creerElement(elmConteneur,
            'button',
            'Commencer',
            'bouton')
        /* On garde une référence sur la fonction terminerIntro */
        let refTerminerIntro = this.terminerIntro.bind(this)
        elmBouton.addEventListener('mousedown', this.terminerIntro.bind(this))
    }

    creerElement(elmParent, balise, contenu, classCSS) {
        console.log(balise)
        let noeud = document.createElement(balise)
        if (contenu != '') {
            noeud.innerHTML = contenu
        }
        noeud.classList.add(classCSS)
        elmParent.appendChild(noeud)
        return noeud
    }

    terminerIntro(evt) {
        this.elmParent.firstChild.classList.add('deplacementContenuIntro')
        this.elmParent.firstChild.addEventListener('animationend', this.passerVersAnimationSuivante.bind(this))
    }

    passerVersAnimationSuivante(evt) {
        Util.detruireTousLesNoeud(this.elmParent, this.elmParent)
        this.fonction()
    }

}

我也有这个文件：我认为我的querySelector有问题，但我不知道：/

import {contenuIntro} from './contenuIntro.js' // le contenu de l'intoduction */
import {Introduction} from './Introduction.js' // 
import {AnimLettre} from './AnimLettre.js' //


/* l'élement de la page qui contiendra les éléments créés dynamiquement */
let elmHeader = document.querySelector('.header')
let intro = new Introduction(contenuIntro, elmHeader, animationLettre)
console.log(document.querySelector('.header'))

// debutQuestionnaire()

function animationLettre()
{
    /* Une fois que l'animation des mots est terminé la fonction animLettre s'exécutera */ 
    console.log('debut animation lettre')
    const lesLettres = 'Veille-technologique'
    let  monAnimLettre = new AnimLettre(lesLettres, elmHeader, finAnim) 
}


function finAnim()
{
    console.log('animation terminée')
}

谢谢你的帮助 ！

Answer 1

elmParent的第一个元素不是HTML dom对象，它没有classList属性，这就是为什么在调用this.elmParent.firstChild.classList.add('deplacementContenuIntro')时得到undefined的原因

您的元素应具有classList属性，例如节点列表的第二和第四元素

如何确保它是一个html元素？ 只需在控制台中单击对象，检查器就会在网页中将其选中

即使这不是实际的答案，它也可以解释错误并根据您的逻辑进行修复。 不错，虽然与法语作斗争。