6/1 TIL

6/1 메모

---

6/1 코드리뷰 ( select value 받아오기)

문제

• select 에 있는 value 값을 기반으로 함수를 다르게 실행하기

시도

async function sort_title() { // 이름순 정렬 
...
}
async function sort_date() { // 출시일 기준 정렬
...
}
async function sort_vote() { // 평점순 정렬 (평점이 같으면 투표 수가 많은 순)
...
}

3개의 function 생성

select의 value에 따라 정렬을 누르면 해당하는 function이 출력하는 기능

해결

1. select option에 value 값을 할당
   <option name="select" value="name">이름</option>

2. .js 파일에서 dom으로 select에 접근하여 option의 value값을 가져옴
   let select = document.getElementById("select");
let value = (select.options[select.selectedIndex].value);//옵션접근
   (.value가 아닌 .text시 안에 있는 text도 가져올 수 있다.)

3. if 문으로 value 값에 맞는 함수호출을 하는 함수 생성

const sort = function () { // select 의 값을 받아와 그에 맞는 정렬함수를 실행
    let select = document.getElementById("select");
    let value = (select.options[select.selectedIndex].value);
    if (value === 'name')
        sort_title()
    else if (value === 'date')
        sort_date()
    else if (value === 'vote')
        sort_vote()
}

4. 정렬 button에 onclick ="sort()"
   <button type="button" id="search-btn">정렬</button>