본문 바로가기
✍ 따뜻한 개발 공부

[JavaScript] 버튼 누르면 글자색 변하게 하기 / document. getElementById("id값"); 뜻이 뭐에요?

by 따따시 2022. 8. 27.

<순서 이해하기>

1. 글자색을 변하게 만들고 싶은 태그에 id값을 부여한다.

 

2. button 을 생성하고, 버튼에 onclick 시 발생할 함수를 입력해준다.

onclick="메소드명();"

 

3. javascript에서 아까 부여했던 id값을 불러온다

그냥 id이름을 부를 수 없고 몇가지 절차가 필요함

 

4. 아래 내용

[1] let    [2] 변수명  [3]=  [4]document. [5]getElement [6]ById [7]("id값");


[1] : let은 자료형
[2] : 변수명 (즉, 우리가 앞으로 부를 변수 이름인 셈)
[3] : =은 쉽게 말하자면 (오른쪽 의 값을 왼쪽에 담는다) 
docu부터 시작해서 ");까지 끝나는 데이터를 변수 안에 넣겠다는 것
[4] : document  '현재 문서'라는 의미
[5],[6] : getElementById("id값"); 
[7] : id값

 

한번에 묶어 해석하면?

=> 현재 문서 안에 있는, "id값"을 변수명에 넣어 호출할게.

 



😎 아래 짠 코드보면서 이해하기

 

1. <body> 부분

<p id="abc">내가 글자색이 변해볼게! 얍! </p>

<button onClick="fontChangeColor()">난 버튼이야</button>

 

2.<script> 부분

let fontchangetarget = document.getElementById("abc");

function fontChangeColor(){
fontchangetarget.style.color="blue";
}



댓글