JavaScript를 이용한 라디오 버튼 클릭 시 배경색 변경
document.body.style.background - html 배경색 변경
코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> <script type="text/javascript"> function change(color) { document.body.style.background=color; } </script> </head> <body> <input type="radio" name="color" onclick="change('red')">빨간색 <br> <input type="radio" name="color" onclick="change('yellow')">노란색 <br> <input type="radio" name="color" onclick="change('blue')">파란색 <br> <input type="radio" name="color" onclick="change('green')">초록색 <br> </body> </html> | cs |
클릭시 change(color) 함수를 부르는데 각 버튼 마다 변경하고싶은 색을 주었다.
코드2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html> <head> <meta charset="utf-8"> <meta charset="EUC-KR"> <title></title> <script language="javascript"> function change(color) { document.bgColor = color; } </script> </head> <body> <input type="radio" name="bgColor" value="yellow" onclick="change(this.value)">노랑색<br> <input type="radio" name="bgColor" value="green" onclick="change(this.value)">초록색<br> <input type="radio" name="bgColor" value="red" onclick="change(this.value)">빨간색<br> <input type="radio" name="bgColor" value="blue" onclick="change(this.value)">파란색<br> </body> </html> | cs |
위의 코드와 좀 다른코드 위의 코드는 함수 호출할 때 색을 넣었다면
value안에 색상을 넣고 함수 호출 시 this.value를 사용하여 자기자신의 value값을 넣어주었다.
결과
'JavaScript' 카테고리의 다른 글
| [JavaScript]시간이 흘러가는 시계 만들기 (0) | 2018.10.23 |
|---|---|
| [Java Script]글자 나타내기 (0) | 2018.10.23 |
| [JavaScript]랜덤 이미지 변경 (0) | 2018.10.23 |
| JavaScript 를 이용한 달력 만들기 (2) | 2018.10.19 |
| Java Script 이용 계산기 만들기 (0) | 2018.10.18 |