select box에서 값을 변경하면 배경색이 변하는 간단한 html을 만들고있는데
이 값이 새로고침이나 페이지 이동 후에도 적용되게 하고싶습니다.
<label for="color-selector">색상 선택:</label>
<select id="color-selector" onchange="changeBackgroundColor()">
<option value="white">하얀색</option>
<option value="red">빨간색</option>
<option value="green" selected>초록색</option>
<option value="blue">파란색</option>
</select>
<option value="white">하얀색</option>
<option value="red">빨간색</option>
<option value="green" selected>초록색</option>
<option value="blue">파란색</option>
</select>
<button>
<a href="test.html">버튼임</a>
</button>
<a href="test.html">버튼임</a>
</button>
<script>
function changeBackgroundColor() {
var colorSelector = document.getElementById("color-selector");
var selectedColor = colorSelector.value;
document.body.style.backgroundColor = selectedColor;
}
</script>
function changeBackgroundColor() {
var colorSelector = document.getElementById("color-selector");
var selectedColor = colorSelector.value;
document.body.style.backgroundColor = selectedColor;
}
</script>
선택박스에서 그냥 색 선택하면 배경색 바꿔주는 기능만 있고
밑에 버튼은 그냥 새로고침 겸 페이지 이동용입니다.
초록색에 selected는 색상 테스트를 위해 잠시 넣었습니다.
1. 새로고침이나 페이지를 이동해도 select 값이 유지되었으면 좋겠습니다.
2. 초록색으로 selected를 했는데 시작할때 배경색이 초록색이 아닙니다. onchange를 사용해서 초록색으로 selectbox가 변경될때만 배경색이 변경되는것 같아서 onselect를 사용했는데 아예 값이 변하지를 않습니다. onselect는 해당 값이 선택되면 기능이 작동하는거 아닌가요?
간단한 문제인데 핑프처럼 여기에 질문드려서 죄송합니다...왠지 검색해서 따라해봐도 작동을 안해서 여기 질문올려봅니다...
