Why prompt Cannot read property 'getElementsByClassName' of undefined

< html lang= "en" >
< head >

<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/text.css">

< / head >
< body >

<!--c-->
<div class="main" id="main">
    <!---->
    <div class="banner" id="banner">
        <a href="">
            <div class="banner-slide slide1 slide-active"></div>
        </a>
        <a href="">
            <div class="banner-slide slide2 "></div>
        </a>
        <a href="">
            <div class="banner-slide slide3 "></div>
        </a>
    </div>
    <!---->
    <div class="dots" id="dots">
        <span class="active"></span>
        <span ></span>
        <span ></span>
    </div>
    <!--,-->
    <a href="javascript：void(0)" class="button prev" id="prev"></a>
    <a href="javascript：void(0)" class="button next" id="next"></a>
    <script src="js/text.js"></script>
<!---->
    <div class="menu-box">
    <!---->
    <div class="menu-content">
        <!---->
        <div class="menu-item">
            <a href="-sharp">
            <span></span>
            <i></i></a>
        </div>
        <div class="menu-item">
            <a href="-sharp">
            <span></span>
            <i></i></a>
        </div>
        <div class="menu-item">
            <a href="-sharp">
            <span></span>
            <i></i></a>
        </div>
        <div class="menu-item">
            <a href="-sharp">
            <span></span>
            <i></i></a>
        </div>
    </div>
    <!---->
    <div class="sub-menu hide">
        <!---->
        <div class="inner-box">
            <!---->
            <div class="sub-inner-box">
                <div class="title"></div>
                <div class="sub-row">
                    <span class="bold mr10">:</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">:</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">:</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">:</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">:</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                    <span class="ml10 mr10">/</span>
                    <a href=""></a>
                </div>
            </div>        
        </div>
        <!---->
        <div class="inner-box">
            <div class="sub-inner-box">
                <div class="title"></div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href="">CPU</a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href="">U</a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
            </div>
        </div>
            <!---->
        <div class="inner-box">
            <div class="sub-inner-box">
                <div class="title"></div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
            </div>
        </div>
            <!---->
        <div class="inner-box">
            <div class="sub-inner-box">
                <div class="title"></div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
                <div class="sub-row">
                   <span class="bold mr10">:</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                   <span class="ml10 mr10">/</span>
                   <a href=""></a>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
</div>

< / body >
< / html >

var index = 0,

timer = null,
banner= byId("banner").getElementsByTagName("div"),
dots  = byId("dots").getElementsByTagName("span"),
len   = banner.length,
prev  = byId("prev"),
next  = byId("next"),
menu  = byId("menu-content"),
subMenu   = byId("sub-menu"),
innerBox  = subMenu.getElementsByClassName("inner-box"),
menuItems = menu.getElementsByClassName("menu-item");