javascript 재도전 6일차

테루·2021년 1월 16일
0
post-thumbnail

저번 도전에서는 이 날에 포기했었지만 이번에는 클리어 했다.

6일차에서 많이 해맸던 부분은
select에서 option을 선택해주는 부분

새로고침시 선택했던 선택했던 option이 그대로 유지되는 부분이 가장 헷갈렸다.

select에서 option을 선택해주는 부분

 const optionVL = element.options[element.selectedIndex].value;

element는 select를 선택하고 있는 변수이다.

그냥 단순히 element.option을 출력하게되면 option들에 번호가 부여된것을 알 수 있다.

그렇다면 그 번호는 우리가 어느 option을 선택했는지 알 수 있게 도와줄 수 있다.

select를 보게되면

이렇게 다운 드롭의 형태로 option들이 보인다.
Choose Your Country부터 finland까지
0 ~ 4번까지의 index가 부여된 것이다.

그렇기 때문에
element.options[element.selectedIndex].value를 쓰게되면
우리가 선택한 번호의 option의 value가 선택이 된다는 말이다.

새로고침시 선택했던 선택했던 option이 그대로 유지되는 부분

이부분은 먼저 localstorage에서 getItem으로 값을 가져오고

if(가져온 value !== null)일때

element(select).value = 가져온 value;

이렇게 쓰면 select안의 option중 가져온 value와 같은 값을 가지고 있는 option이 선택이 된다.

그리고 그 함수를 실행하게 해주면 그대로 유지가 된다.

function getValue() {
    const lsValue = localStorage.getItem('country');
    if (lsValue !== null) {
        chooseCN.value = lsValue;
    }
}
getValue();
profile
아직은 달걀안의

0개의 댓글