1) 학습한 내용
자바스크립트 기초 1일차
2) 학습내용 중 어려웠던 점
input 속성 중 onclick 부분이 이해가 안감
- 처음 에러난 코드
코드를 입력하세요
<input type="button" value="Dark" onclick="">
<input type="button" value="light" onclick="">
<script>
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='White';
</script>
<script>
document.querySelector('body').style.backgroundColor='snow';
document.querySelector('body').style.color='black';
</script>
3) 해결방법
- onclick " "=> onclick이벤트는 사용자가 요소를 클릭할 때 발생.
- 문제의 이유 : <script> </script> 에 넣어 사용시 functiond을 사용하여 작성을 해야했다. (참조 W3c)
<!DOCTYPE html>
<html>
<body>
<input type="button" value="Dark" onclick="mode01()">
<input type="button" value="light" onclick="mode02()">
<script>
function mode01() {
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='White';
}
function mode02() {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
}
</script>
</body>
</html>
- 스크립트에 넣지 않고 직접 사용시 방법을 배움
<input type="button" value="Dark" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='White'; ">
<input type="button" value="light" onclick="
document.querySelector('body').style.backgroundColor='snow';
document.querySelector('body').style.color='black';
">```
4) 학습소감
w3c에서 직접 찾아보고 새로운 작성방법에 대해 알아 갈 수 있었다.