추가로 구현해보기 1: 랜덤 색상

문제 발생

저 버튼을 눌렀을 때 콘솔 창에 "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() 를 사용하면 해결~★

이걸로 일단 콘솔까지는 찍었다 (뿌듯)

---

복습 + 추가공부: 랜덤

JS크롬앱 #6.0 Quotes

Math.random()을 사용하면 소숫점 결과값들이 나옴

JS크롬앱 #6.0 Quotes

이때 뒤에꺼 없애줄 수 있는 것

• 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이 설정된다.

 

https://velog.io/@awesomelon/

.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)

 

---

오 진짜 이거는 스스로 해봐야된다...

동영상 보고 따라만 해보는 것하고는 많이 달랐다.

그래도 내가 원하는 기능을 구현해내서 너무 뿌듯하다

마우스 포인터가 보이지 않지만 랜덤 찍어서 해보고 있는 중 (룰루랄라~)