[javascript] splice()를 활용한 팀 순서 랜덤 정하기

팀 순서 랜덤으로 정하기

 

1. html

    <div class="m">
        <h1>팀 순서 정하기</h1>

        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <button>선택</button>
    </div>

 

div는 테두리를 위해 만든것.

 

 

2. script

    <script>
        function select(){
            let list = document.getElementsByTagName('li');
            var i=0;
            var num;
            var groupList = ['1조','2조','3조','4조'];
            for(i=0; groupList.length>0; i++){
                num=Math.floor(Math.random()*groupList.length);
                list[i].innerHTML = groupList[num];
                groupList.splice(num,1);            
            }
        }
        document.querySelector("button").onclick = select;        
    </script>

 

groupList 배열을 만들어 Math.random 함수를 이용해 랜덤으로 나온 값을 num에 넣음

그리고 innerHTML로 i번째에 있는 li에 groupList 배열의 num(랜덤)번째 인덱스를 출력한 뒤

splice 함수를 사용

 

 

splice(2,1)이면 2번째 요소를 하나 삭제하는 것이기 때문에 2번째 요소인 3조를 삭제함

그러면 남은 조는 1,2,4조이며 중복 없이 랜덤으로 할 수 있다.

 

 

결과