문제 발생
저 버튼을 눌렀을 때 콘솔 창에 "fff"가 찍히도록 했는데 안 찍힌다...
slack에 SOS를 요청한 결과 이유를 알아냈어요
getElementsByClassName으로 하면 리턴되는 타입이 배열된다.
배열에는 addEventLinstener를 사용할 수 없다.
도벨님께서 링크까지 주셨다.
더 찾아보았다.
추가적으로 공부된 것: getElementsByClassName()
콘솔 창에서 getElementsByClassName() 함수를 사용하면 id 속성 값으로 DOM 요소에 접근했던 것과 다르게 HTMLCollection 값을 출력합니다. 이는 여러 개의 HTML 요소를 담고 있는 자료 형식으로 , 배열과 비슷한 형식입니다.
추가적으로 공부된 것: getElementById() 와 querySelector() 함수의 차이
웹 요소 정도만 변경한다면 getElementById()를 사용하고, 웹 요소 뿐만이 아니라 요소의 텍스트나 속성을 변경하거나 새로운 노드를 추가하고 싶다면 querySelector(), querySelectorAll() 함수를 사용하면 됩니다.
출처: https://kimbangul.tistory.com/62
getElementsByClassName()와 addEventListener()
getElementsByClassName() 메소드는 Element 가 아닌 객체를 반환하고
addEventListener() 메소드는 기본적으로 Element 를 대상으로 하기 때문에
객체 뒤에 [0]을 붙여 Element 에 접근하거나,
아니면 대신에 하나의 Element 만을 선택해주는 querySelector() 를 사용하면 해결~★
출처: https://velog.io/@imim/Javascript
OK. 이제 이해가 됐다.
getElementsByClassName() 함수를 사용하면 HTMLCollection 값이 출력되는데 이놈은 객체를 반환하는데 addEventListener()는 Element를 받음.
해결
객체 뒤에 [0]을 붙여 Element 에 접근하거나,
아니면 대신에 하나의 Element 만을 선택해주는 querySelector() 를 사용하면 해결~★
이걸로 일단 콘솔까지는 찍었다 (뿌듯)
복습 + 추가공부: 랜덤
Math.random()을 사용하면 소숫점 결과값들이 나옴
이때 뒤에꺼 없애줄 수 있는 것
- round: 반올림
- ceil: 올림
- floor: 내림
HEX Color 랜덤
# + 6개의 숫자 or 알파벳이 온다
HEX Color에서는 0~9까지의 숫자가 사용되고 A~F의 알파벳이 사용된다.
A=10, B=11, C=12, D=13, E=14, F=15 값을 가진다.
toString() 메소드를 사용하면 임의의 알파벳을 토해낸다.
기본값으로는 10이 설정된다.
.toString([radix])은 매개변수로 2~36 사이의 정수를 받는데 이는 진수를 나타내는 값이다.
MDN: toString()
나는 F까지만 필요하니 16진수를 사용하면 된다.
✔ 방법1
MDN: substring()
substring() 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다.
나는 여기서 소숫점 뒤에 6자리까지만 필요하니 substring(2, 8)을 추가해주면 된다.
방법2
Math.floor
내림을 이용해서 7자리 정수를 받아온다. 그리고 그 후에 문자열을 추가해준다.
Math.floor(Math.random()*10000000).toString(16)
오 진짜 이거는 스스로 해봐야된다...
동영상 보고 따라만 해보는 것하고는 많이 달랐다.
그래도 내가 원하는 기능을 구현해내서 너무 뿌듯하다
'노마드 코더 - 초급 > 바닐라 JS로 그림판 만들기' 카테고리의 다른 글
추가로 구현해보기 3: brush의 마무리가 둥글둥글한 효과 주기 (0) | 2022.03.12 |
---|---|
추가로 구현해보기 2: clear 기능 추가하기 (0) | 2022.03.12 |
후기 + 추가 기능 구현 계획 (0) | 2022.03.10 |
우클릭 금지 / URL가져오고 link생성 (0) | 2022.03.10 |
캔버스 배경 칠하기 (0) | 2022.03.09 |