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

问题描述

这是console.log嘿伙计们，我的javascript 代码有问题。当我点击一个按钮时，我尝试做一个动画，但我有这个错误：无法读取未定义的属性“添加”我不知道是什么问题！

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')
}

谢谢你的帮助！

标签： javascript

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

您的元素应该具有classList类似于节点列表的第二个和第四个元素的属性

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

即使这不是一个实际的答案解决方案，它也可以解释错误并根据您的逻辑进行修复。不过很好地与法语作斗争。

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

问题描述

解决方案

推荐阅读