[바닐라js로 그림판 만들기] Changing Color

<div class="controls_color jsColor" style="background-color: white"></div>
<div class="controls_color jsColor" style="background-color: #616161"></div>
<div class="controls_color jsColor" style="background-color: #e57373"></div>
<div class="controls_color jsColor" style="background-color: #ff8a65"></div>
<div class="controls_color jsColor" style="background-color: #fff176"></div>
<div class="controls_color jsColor" style="background-color: #aed581"></div>
<div class="controls_color jsColor" style="background-color: #4fc3f7"></div>
<div class="controls_color jsColor" style="background-color: #1e88e5"></div>
<div class="controls_color jsColor" style="background-color: #ba68c8"></div>

Html 태그에서 각 컬러들에 class를 추가한다. (jsColor)

 

const colors = document.getElementsByClassName("jsColor");

이것을 자바스크립트에서 가져오고 console.log(colors)해보면 배열이 아니라 HTMLCollection인 것을 알 수가 있는데,

HTMLCollection은 HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다.

유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다.

 

console.log(Array.from(colors));

그러므로 HTML Collection을 array로 바꿔주는 코드를 넣는다.

Array.from()은 유사배열을 배열처럼 만들어주는 것이다.

 

Array.from(colors).forEach(color => color.addEventListener("click", handleColorClick));

그리고 배열에 forEach를 쓰면 된다. 그러면 배열의 모든 요소에 실행을 하는 것이다.

(화살표 함수 방법으로 썼음, forEach(function(color){

color.addEventListener(“click”, handleColorClick);

} 이랑 동일하다!)

 

 

function handleColorClick(event){

    const color = event.target.style.backgroundColor;

    ctx.strokeStyle = color;

}

Click을 했을 때 이벤트가 발생한 target의 스타일의 백그라운드 색을 ctx.strokeStyle(브러쉬의 색상)으로 바꿔주면 된다.

 

이제 실행해보면 색을 클릭했을 때 브러쉬 색이 변하는 것을 알 수가 있다.