TIL :: DOM + Event

아래 이력서 사이트에 들어가서 개발자 도구를 활용하여 아래 과제를 진행한 후 구글 클래스룸에 제출해주세요.

• https://hyunseob.github.io/resume/
• 개발자 도구 console 패널에서 작성한 코드를 캡쳐해서 제출하면 됩니다!
• 시행착오를 겪어 코드가 지저분하다면 그 코드 그대로! 캡쳐해서 올려주세요!
• 힌트1 : element 패널에서 DOM에서 접근하고자 하는 요소의 className을 확인해주세요.

 

과제 1. 아래와 같이 상단의 설명 부분의 글자를 파란색으로 바꿔주세요.

 

과제 2. 글자색을 바꾼 부분을 클릭하면 아래와 같은 alert 창이 뜨도록 구현해주세요.

---

나의 풀이

const a = document.getElementsByClassName('big-paragraph')[0];

a.style.color='blue'


document.getElementsByClassName('big-paragraph')[0].onclick = function () {alert('내용을 클릭했군요!');}

 

 

 

 

과제 1

// SOLUTION 1
document.getElementsByClassName('big-paragraph')[0].style.color = 'red'

// SOLUTION 2
const p = document.getElementsByClassName('big-paragraph')[0]
p.style.color = 'red'

과제 2

// SOLUTION 1
document.getElementsByClassName('big-paragraph')[0].addEventListener('click', () => {console.log('내용을 클릭했군요!')})

// SOLUTION 2
const clickHandler = (event) => {
  console.log('내용을 클릭했군요!')
}

document.getElementsByClassName('big-paragraph')[0].addEventListener('click', clickHandler)

// SOLUTION 3
const clickHandler = (event) => {
  console.log('내용을 클릭했군요!')
}
document.getElementsByClassName('big-paragraph')[0].onclick = clickHandler