Javascript - EventListener를 활용하여 마우스 포인터, 텍스트 내용, 배경색 수정하기

EventListner를 활용한 HTML 수정을 구현해보았습니다.

변경 점은 마우스포인터, 텍스트내용, 배경색입니다.

 

- 작성코드 - 

 

See the Pen Untitled by duglikespiano (@duglikespiano) on CodePen.

 

 

1. 마우스 포인터

 

실행 초기 상태에서는 위 버튼을 클릭할 수 없습니다.

아래 버튼을 한 번 클릭 시 위 버튼 클릭이 활성화 되도록 구현했습니다.

 

 

2. 텍스트 내용

 

textContent메소드를 사용하여,

클릭 시 내부 텍스트가 변경되도록 구현했습니다.

 

 

3. 배경색

 

클릭 시, changedBtn클래스가 탈부착 되도록 구현했습니다.

이를 통해, 배경색이 변경되도록 구현했습니다.