[javaScript] function의 파라미터 사용하여 button기능 개발

 

[파라미터 사용하는 이유]
1. 하나의 함수를 여러번 사용할 수 있습니다.
-함수 내부의 기능을 항상 똑같은 것만 실행하는게 아니라 다양한 기능을 수행하는 함수를 만들고 싶을 때 씁니다.


[버튼기능개발]
1. 버튼1 을 클릭하면 '아이디를 입력하세요' box가 나옵니다.
2. 버튼2 를 클릭하면 '비밀번호를 입력하세요' box가 나옵니다.

[코드리뷰]
1. 불필요한 html 코드를 사용하지 않고 변해야하는 텍스트를 확인합니다.
- p태그안의 span 만 자바스크립트를 이용하여 바꿔줍니다.
2. 버튼을 클릭했을 때 box가 나오게 합니다
- 버튼 클릭시 display:block이 될 수 있도록 자바스크립를 이용하여 style을 바꿔줍니다.

<div class="Box2"> 
 	<button onclick="loginBox('아이디','block')"> 버튼1 아이디</button> 
	<button onclick="loginBox('비밀번호','block')"> 버튼2 비밀번호</button>    
 	<div id="login" class="login"> 
    	<p><span id="title">아이디</span>를 입력하세요</p> 
    </div>   
</div>

 

 function loginBox(style,style1){ 
   document.getElementById('title').innerHTML = style; 
   document.getElementById('login').style.display = style1; 
 }