老师这个报错是什么原因

老师这个报错是什么原因

https://img1.sycdn.imooc.com//climg/62ef545a09321eb208130328.jpg

https://img1.sycdn.imooc.com//climg/62ef549f0915546d07650297.jpg

nodeType这个不是DOM元素的默认属性吗,还会读不到吗?是因为DOM元素没有获取到吗?

https://img1.sycdn.imooc.com//climg/62ef54e00923034f05900160.jpg


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2022-08-07 14:17:38

同学你好,猜测可能是由于DOM元素没有获取到导致的报错,建议同学先下载源码对比排查下,如果排查不出来,可以将你自己写的相关粘贴过来,老师帮助测试下。

下图所示文件中的代码:

https://img1.sycdn.imooc.com//climg/62ef58fe09d6caac05430205.jpg

祝学习愉快~

  • 提问者 困惑小张 #1

    base.js:

    import { ELEMENT_NODE_TYPE ,SLIDER_ANIMATION_CLASS_NAME} from './constants';
    import DEFAULTS from './defaults';
    
    class BaseSlider {
        constructor(el, options) {
            if (el.nodeType !== ELEMENT_NODE_TYPE) {
                throw new Error('实例化的时候,请传入DOM元素!');
            }
    
            //实际参数
            this.options = {
                ...DEFAULTS,
                ...options
            }
    
            const sliderEl = el;
            const sliderContentEl = sliderEl.querySelector('.slider-content');
            const sliderItemEls = sliderContentEl.querySelectorAll('.slider-item');
    
            //添加到this上,为了在方法中使用
            this.sliderEl = sliderEl;
            this.sliderContentEl = sliderContentEl;
            this.sliderItemEls = sliderItemEls;
    
            //限定索引范围
            this.minIndex = 0;
            this.maxIndex = sliderItemEls.length - 1;
            this.currIndex = this.getCorrectedIndex(this.options.initialIndex);
    
            //获取每个slider-item的宽度(每次移动的距离)
            this.itemWidth = sliderItemEls[0].offsetWidth;
    
            this.init();
        }
    
        //初始化
        init() {
            //为每个slider-item设置宽度
            this.setItemsWidth();
    
            //为slider-content设置宽度
            this.setContentWidth();
    
            //切换到初始索引initialIndex
            this.move(this.getDistance());
    
            //开启动画
            if(this.options.animation){
                this.openAnimation();
            }
        }
    
        //开启动画
        openAnimation(){
            this.sliderContentEl.classList.add(SLIDER_ANIMATION_CLASS_NAME);
        }
    
        //关闭动画
        closeAnimation(){
            this.setAnimationSpeed(0);
        }
    
        //设置切换动画速度
        setAnimationSpeed(speed=this.options.speed){
            this.sliderContentEl.style.transitionDuration=`${speed}ms`;
        }
    
        //不带动画的移动
        move(distance){
            this.sliderContentEl.style.transform=`translate3d(${distance}px,0px,0px)`;
        }
    
        //带动画的移动
        moveWithAnimation(distance){
            this.setAnimationSpeed();
            this.move(distance);
            //移动完毕关掉动画,设置事件监听
            this.sliderContentEl.addEventListener(
                'transitionend',
                ()=>{
                    this.closeAnimation();
                },
                false
            );
        }
    
        //获取要移动的距离
        getDistance(index=this.currIndex){
            return -this.itemWidth*index;
        }
    
        //为每个slider-item设置宽度
        setItemsWidth() {
            for (const item of this.sliderItemEls) {
                item.style.width = `${this.itemWidth}px`;
            }
        }
    
        //为slider-content设置宽度
        setContentWidth() {
            this.sliderContentEl.style.width = `${this.itemWidth * this.sliderItemEls.length}px`;
        }
    
        //获取修正后的索引值
        getCorrectedIndex(index) {
            if (index < this.minIndex) return this.maxIndex;
            if (index > this.maxIndex) return this.minIndex;
            return index;
        }
    }
    
    export default BaseSlider;


    index.js:

    import BaseSlider from './base';
    import keyboard from './keyboard';
    
    //继承基类
    class Slider extends BaseSlider{
        constructor(el,options){
            super(el.options);
    
            this.bindEvent();
        }
    
        bindEvent(){
            keyboard.bindEvent(this);
        }
    }
    
    export default Slider;


    https://img1.sycdn.imooc.com//climg/62ef5e4a09c1c29d06770061.jpg

    import './slider.css';
    
    import Slider from './module';
    
    new Slider(document.querySelector('.slider'),{
        initialIndex:1
    });

    https://img1.sycdn.imooc.com//climg/62ef5e72091cce2a06520067.jpg

    //css
    // import './css/reset.css';
    import './css/css.css';
    
    //公共样式
    import 'styles/base.css';
    import 'styles/reset.css';
    import 'styles/layout.css';
    
    //js
    import './js/backtotop';
    import './js/menu';
    
    //组件
    import 'components/topbar';
    // import './components/carousel';
    import './components/slider';
    import './components/jjzyx';



    2022-08-07 14:41:32
  • 好帮手慕慕子 回复 提问者 困惑小张 #2

    同学你好,根据粘贴的代码测试,是因为components/slider/module/index.js文件中,传入super方法中的参数,将逗号写成了点,导致报错。建议修改:

    https://img1.sycdn.imooc.com//climg/62ef662809470b1504670382.jpg

    祝学习愉快~

    2022-08-07 15:14:01
  • 提问者 困惑小张 回复 好帮手慕慕子 #3

    哦哦哦哦哦!谢谢老师!

    2022-08-07 15:24:31
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师