저번 도전에서는 이 날에 포기했었지만 이번에는 클리어 했다.
6일차에서 많이 해맸던 부분은
select에서 option을 선택해주는 부분과
새로고침시 선택했던 선택했던 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가 선택이 된다는 말이다.
이부분은 먼저 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();