[JS] onclick 활용, button눌러 div class 변경하기
2022. 5. 31. 20:53ㆍProgramming의 세계/JavaScript
onclick : 마우스를 클릭할 때 브라우저에게 해야할 일을 알리는 바인딩 이벤트.
<사용법>
| <Javascript 코드> name.onclick = 'javascriptCode'; <HTML 코드> <element onclick="javascriptCode"> |
미션 : prompt에 받은 문자열을 화면에 크게 띄운 다음,
하단에 있는 빨강, 파랑, 초록 버튼을 누를 때마다 버튼명대로 문자색상을 변경할 것.
<prompt에 받은 문자열을 화면에 띄우기>
1. prompt에 문자열을 받는다.
var num = String(prompt('텍스트를 입력해 주세요', ''));2. 문자형태만 받기 위해 isNaN(Not a Number)이란 함수를 사용한다.
매게변수가 숫자인지 검사하는 함수로 isNaN(value) 형태로 쓴다. 숫자면 false, 숫자가 아니면 true를 반환한다.
if (isNaN(num) == true && isNaN(num) != null) {
break;
}3. 변수를 화면에 출력한다.
document.write(num);<버튼 만들기>
1. 웹페이지에 나타낼 버튼 지정
<div id="cols" class="btn">
<button class="btn" onclick="change_style_red()">빨강</button>
<button class="btn" onclick="change_style_blue()">파랑</button>
<button class="btn" onclick="change_style_green()">초록</button>
</div>2. changeStyle_red(), changeStyle_blue(), changeStyle_green() 펑션은 다음과 같이 설정한다.
function change_style_red() {
let $target = document.getElementById('target');
$target.style.color = 'red'
}
function change_style_blue() {
let $target = document.getElementById('target');
$target.style.color = 'blue'
}
function change_style_green() {
let $target = document.getElementById('target');
$target.style.color = 'green'
}3. 눌렀을때 alert 띄우기
function click(e) {
alert(`${this.innerHTML}색으로 변경됩니다.`);
}<스타일 지정하기>
<style>
.div1 {
font-size: 100px;
justify-content: center;
text-align: center;
line-height: 80%;
margin-top: 20%;
}
.btn {
font-size: 20px;
justify-content: center;
text-align: center;
line-height: 90%;
margin-top: 10%;
}
</style>스타일 적용한 것을 적용한다.
<div id="target" class="div1">
<script>
document.write(num);
</script>
</div>
<div id="cols" class="btn">
<button class="btn" onclick="changeStyle_red()">빨강</button>
<button class="btn" onclick="changeStyle_blue()">파랑</button>
<button class="btn" onclick="changeStyle_green()">초록</button>
</div>
결과창
0123
D.O.N.E!!
'Programming의 세계 > JavaScript' 카테고리의 다른 글
| [JQuery] 체크박스 전체 선택, 해제, 값 얻기 (0) | 2022.06.02 |
|---|---|
| [JQuery] JQuery/ CDN 시작하기 (0) | 2022.06.02 |
| [JS] onmouseover/ onmouseleave 활용한 메뉴 색상 변화 (0) | 2022.06.02 |
| [JS] prompt /alert 문자열 받아 출력하기 (0) | 2022.05.31 |
| [JS] DOM, 자바스크립트, JSON 개념 (0) | 2022.05.31 |