송민준의 개발노트

Javascript 활용 : EventListener를 활용한 배경색 바꾸기 본문

웹/Javascript

Javascript 활용 : EventListener를 활용한 배경색 바꾸기

송민준 2019. 10. 23. 16:33

여기서 제일 중요한 것은 EventListener 안에 익명함수를 사용해서 기능을 정해주는 것이다.

2번째 인자값에 change()가 아닌 익명 함수 안에서 인자값을 포함한 change를 호출해주면 이상 없이 돌아간다.

없이 했더니 계속 오류떠서...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
button {
	width : 70px;
	height: 25px;
	margin : 10px 0
}
img {
	width : 100px;
	position : absolute;
	visibility : visible;
	top: 45px;
}
#img1 {
	left : 50px;
}
#img2 {
	left : 175px;
}
#img3 {
	left : 300px;
}

#outerBox {
	background : blue;
	width : 550px;
	height : 300px;
}

#innerBox {
	background : yellow;
	width : 450px;
	height : 200px;
	position : absolute;
	left : 55px;
	top : 55px;
}
span {
	display : inline-block;
	width:80px;
	background:#ccc;
	color:black;
}
</style>

</head>
<body>
<div id = "outerBox">
	<div id = "innerBox">
		<img id="img1" src="dog.jpg">
		<img id="img2" src="ham.jpg">
		<img id="img3" src="Koala.jpg">
	</div>
</div>

<span>Outer Box</span>
<button >Red</button>
<button >Green</button>
<button >Blue</button>
<button >Gray</button>
<button >White</button>

<br>
<span>Inner Box</span>
<button >Red</button>
<button >Green</button>
<button >Blue</button>
<button >Gray</button>
<button >White</button>

</body>
<script>

	function change(obj, divid) {
		var box = document.getElementById(divid);
		box.style.backgroundColor = obj.innerHTML;
	}
	
	//var btn = document.getElementsByTagName('button');
	var btn = document.querySelectorAll('button');
	for(var i=0; i<btn.length; i++) {
		if(i>=5)
			btn[i].addEventListener('click', function(){change(this, 'innerBox')});
		else
			btn[i].addEventListener('click', function(){change(this, 'outerBox')});
	}
	
</script>
</html>

 

위의 예제에서 익명 함수 내에서 다른 함수를 호출 안하고 기능을 구현하고자 한다면 다음과 같이 하면 된다.

<script>

	function change(obj, divid) {
		var box = document.getElementById(divid);
		box.style.backgroundColor = obj.innerHTML;
	}
	
	//var btn = document.getElementsByTagName('button');
	var btn = document.querySelectorAll('button');
	for(var i=0; i<btn.length; i++) {
		if(i>=5)
			btn[i].addEventListener('click', function(){
				var box = document.getElementById('innerBox');
				box.style.backgroundColor = this.innerHTML;	
			});
		else
			btn[i].addEventListener('click', function(){
				var box = document.getElementById('outerBox');
				box.style.backgroundColor = this.innerHTML;	
			});
	}
	
</script>

'웹 > Javascript' 카테고리의 다른 글

회원가입 유효성 검사  (0) 2019.10.24
javascript 활용3  (0) 2019.10.23
Javascript 활용2  (0) 2019.10.22
Javascript 이미지 클릭 시 다른 이미지로 바뀜  (0) 2019.10.21
자바스크립트 활용  (0) 2019.10.21
'웹/Javascript' Related Articles more