웹/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>