onclick 이벤트 사용법

1) onclick 이벤트를 사용해서 클릭시마다 글자색이 연속해서 변하도록✅

<p id="colorBtn" style="color: black;"> 바뀌는 글자색 </p>
<button onclick="clickRed()">
변신 버튼
</button>

<script>

let changeRed= document.getElementById("colorBtn");

function clickRed(){
	const currentColor = changeRed.style.color
	let newColor;

	if(currentColor ==="black"){
	newColor = "red";
	}

	else{
	newColor = "black";
	}

	changeRed.style.color= newColor;
}  
</script>	

디폴트가 검정색이라서 style에 글자색을 정하지 않았더니, 2회 클릭해야 반응한다는걸 발견. 기본적인것도 계속 의심해보자.

2) 이번엔 글자크기가 커지도록! 하지만 좀더 간단하게 작성해보자✅

<p id="bigFont" style="font-size:30px;">
이번에는 글자를 크게 해보자
</p>


<button onclick= "bigger()">
키우는 버튼
</button>

<script>
function bigger(){
document.getElementById("bigFont")
.style.fontSize="80px";
}
</script>