Javascript 자바스크립트 버튼 클릭해서 화면 바꾸기

<p id="demo">p tag입니다</p>

<input type = "text" id = "text" value = "name" size = "20">

<input type = "button" value = "입력" onclick="btnClick()">

<script type="text/javascript">

function btnClick(){
	document.getElementById("demo").innerHTML = "button click!";
	
	document.getElementById("text").value = "버튼 클릭";
}

</script>

아이디를 demo로 준 p태그를 통해서 이번에는 텍스트를 입력하고 버튼을 꾹 눌러보는 것까지 해보겠습니다. input요소의 여러가지 타입 중에서 text와 button을 사용해보겠습니다. onclick에서 쓴 함수는 btnClick()으로 스크립트 안에 넣어줬습니다. 

이름을 입력하고 입력 버튼을 누르면 우리가 btnClick()함수에서 만들어놓은것처럼 p 태그는 button click!으로 바뀌고, 텍스트 인풋의 밸류는 버튼 클릭으로 바뀌게 됩니다. 이 입력 후 모든게 버튼을 클릭하여서, 미리 만들어놓은 btnClick()함수가 동작하였기 때문입니다. 

 

<input type = "button" value = "input button" onclick = "btnfunc(1)">
<br>
<button type = "button" onclick = "btnfunc(2)">input button</button>

<script type="text/javascript">
function btnfunc(n){
	let name; 
	
	if(n == 1){
		name = 'input button click';
	}else{
		name = 'button tag click';
	}
	alert(name);
}
</script>

버튼을 만드는 방식은 input type = "button"을 활용하거나, <button></button>을 활용하는 방법이 있습니다. 둘 다 버튼은 동일하게 만들어집니다. 다만 두 개를 눌렀을 때 다른 alert창이 뜨도록 만들어보겠습니다. 매개변수로 n을 주고, n이 1이면 input button click이라는 alert창이 뜨게 하고, 1이 아니면 button tag click으로 뜨게끔 만들겠습니다. 

두 개 다 잘 뜨는 것을 확인할수가 있겠습니다.