[Westagram]_JavaScript - 버튼 활성/비활성화

Westagram_Ⅰ.버튼 활성/비활성화 & 댓글 기능 구현

1. getElementbyTagName('') / querySelector('') /querySelectorAll('') 차이점은?
2. HTML <button>태그의 disabled라는 attribute란?

주요 코드

로그인 창 버튼 활성/비활성화 기능 구현

• JavaScript

const loginButton = document.getElementsByTagName('button')[0]; 
const idInput = document.querySelector('.idInput');
const pwInput = document.querySelector('.pwInput');

function active(){
  if(idInput.value && pwInput.value) {
    loginButton.removeAttribute("disabled","");
    loginButton.style.backgroundColor = "#5586EB";
  } else {
    loginButton.setAttribute("disabled","");
    loginButton.style.backgroundColor = "#c4e1fb";
  }
}

idInput.addEventListener('keyup', active);
pwInput.addEventListener('keyup', active);

• 🧐 getElementsByTagName & querySelector 차이점은 무엇일까?
  - getElementByTagName('') 는 특정 태그를 가진 모든 요소를 선택하며,선택된 요소는 유사 배열 객체로 반환된다.
  - 이 때문에, document에서 해당 메서드로 태그를 가져와야 할 때는 뒤에 [index]값을 줘야한다.
  ex. const loginButton = document.getElementsByTagName('button')[0]
  
  
  - 반면, querySelector('')는 CSS 선택자로 요소를 선택하게 해준다.
  - 주의할 점은 선택자에 해당하는 첫번째 요소만 선택하기 때문에 내가 원하는 선택자가 맞는지 잘 확인해주어야 한다.
  ex. document.querySelector('.idInput')
  
  
  - 추가적으로, querySelectorAll('')은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드이기때문에 getElementByTagName('') 처럼 뒤에 [index]값을 줘야한다.
  
  
  
• 🧐 HTML <button>태그에 disabled라는 attribute값을 부여하고 이를 활용하여 버튼 활성/비활성화 시키는 법은?
  1. HTML의 <button>태그에 disabled라는 attribute값을 부여
  2. if문을 활용하여 input에 vlaue값이 있을경우에 대한 조건을 주고, 이 경우 disabled 속성을 없애주는 removeAttribute() 메서드 활용
  ex. loginButton.removeAttribute("disabled","")
  3. 조건이 만족하지 않을 경우(else) disabled 속성을 세팅해주는 setAttribute()메서드 활용
  ex. loginButton.setAttribute("disabled","");