input type="submit" vs button 비교 with Javascript

button은 기능적으로 차이가 없을까?

폼 전송 기능을 하는 <input type="submit"> 과 <button> 은 기능적으로 동일하다.

기본적으로 button 요소는 type 속성을 명시하지 않으면 submit 기능을 수행한다.

 

javscript 에서의 차이점

자바스크립트 DOM 조작시 차이가 발생한다.

다음 예시를 보면 버튼의 경우 '언팔로우' 텍스트가 태그 사이에 들어가 있다.

{% if user in followers %}
	<button id="follow-btn">언팔로우</button>
{% else %}
	<button id="follow-btn">팔로우</button>
{% endif %}

그렇기 때문에 자바스크립트에서 DOM 조작시 'innerText'를 사용한다.

const followBtn = document.querySelector('#follow-btn')

if (isFollowed == true) {
	followBtn.innerText = '언팔로우'
} else {
	followBtn.innerText = '팔로우'

 

반면 input 태그의 경우 '언팔로우' 텍스트가 value값으로 들어간다.

{% if user in followers %}
	<input id="follow-btn" type="submit" value="언팔로우">
{% else %}
	<input id="follow-btn" type="submit" value="팔로우">
{% endif %}

따라서 자바스크립트 DOM 조작시 '.value'로 값을 바꾸어주어야 한다.

const followBtn = document.querySelector('#follow-btn')

if (isFollowed == true) {
	followInput.value = '언팔로우'
} else {
	followInput.value = '팔로우'
}