<!DOCTYPE html>

<html>

<head>

    <title>Document/title>

    <script>       

        var $menu = null;

        var $menuName = null;

        var $selectedItem = null;

        

        $(document).ready(function() {

            init();

            initEvent();

        });


        function init(){

            $menu = $("ul.menu");

            $menuName = $("#menuName");

        }


        function initEvent(){

            $menu.on("click", "li",function(){

                setSelectItem($(this));

            }); 


            

            $("#add").click(function(){

                addMenu();

            });

                        

            $("#update").click(function(){

                updateMenuItem();

            })


            $("#remove").click(function(){

                removeMenuItem();

            });


            $("#up").click(function(){

                upMenuItem();

            });


            $("#down").click(function(){

                downMenuItem();

            });

        }


        function addMenu(){

            var menuName = $menuName.val();

            var newMenuItem = "<li>"+menuName+"</li>";

            if ($selectedItem) {

                $selectedItem.after(newMenuItem);

            }

            else {

                $menu.append(newMenuItem);

            }

        }


        function setSelectItem($item){

            if ($selectedItem != null)

                $selectedItem.removeClass("select");

            $selectedItem = $item;

            $selectedItem.addClass("select");

        }


        function updateMenuItem(){

            if ($selectedItem) {

                var menuName = $menuName.val();

                $selectedItem.html(menuName);

            } else {

                alert("선택 메뉴가 존재하지 않습니다.");

            }

        }


        function removeMenuItem(){

            if ($selectedItem) {

                $selectedItem.remove();

                $selectedItem = null;

            } else {

                alert("선택 메뉴가 존재하지 않습니다.");

            }

        }


        function upMenuItem(){

            if ($selectedItem) {

                var $prevItem = $selectedItem.prev();

                if ($prevItem)

                    $selectedItem.insertBefore($prevItem);

            } else {

                alert("선택 메뉴가 존재하지 않습니다.");

            }

        }


        function downMenuItem(){

            if ($selectedItem){

                var $nextItem = $selectedItem.next();

                if ($nextItem)

                    $selectedItem.insertAfter($nextItem);                    

            } else {

                alert("선택 메뉴가 존재하지 않습니다.");

            }

        }

    </script>

    </head>

    <body>

        <div class="control">

            <input type="text" id="menuName" /> 

            <button id="add">추가</button> 

            <button id="update">수정</button> 

            <button id="remove">삭제</button>

            <button id="up">UP</button> 

            <button id="down">DOWN</button>

        </div>

        <ul class="menu">

            <li>menu1</li>

            <li>menu2</li>

            <li>menu3</li>

            <li>menu4</li>

            <li>menu5</li>

        </ul>

    </body>

</html>




구글 개발자도구는 이렇고 아예 기능들이 눌리기만 하고 작동이 안되는데 뭐가 문제인지 모르겠습니다

도와주시면 정말 감사하겠습니다