< input type='button' > 태그를 사용한 활성화/비활성화 할 때
disabled 속성을 사용합니다
input 태그에 disabled 속성을 따로 명시해주지 않으면 활성화
-> < input type='button' value='활성화' />
input 태그에 disabled 속성을 따로 명시해주면 비활성화
-> < input type='button' value='비활성화' disabled />
input 태그에 disabled 속성을 명시해주고 disabled 값을 주면 비활성화
-> < input type='button' value='비활성화' disabled='disabled' />
애초에 비활성화를 시키고 싶은 input button 이라면 disabled 속성을 추가해준다.
<input id="hello" type="button" value="안녕" disabled/>
disabled를 이용하려면, 이벤트를 줄 때
target.disabled = true 혹은 false 를 준다
disabled 라는 뜻 자체가 비활성화 이기 때문에, 부정의 부정을 해주어야 활성화가 된다 👇🏻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input id="hello" type="button" value="안녕" disabled/>
<input id="active" type="button" value="활성화시키기" />
<script type="text/javascript" src="./index.js">
const helloBtn = document.getElementById("hello");
const activeBtn = document.getElementById("active");
const disabledFn = (e) => {
helloBtn.disabled = true;
};
const activeFn = (e) => {
helloBtn.disabled = false;
helloBtn.style.cursor = 'pointer';
}
helloBtn.addEventListener("click", disabledFn);
activeBtn.addEventListener("click", activeFn)
</script>
</body>
</html>
동영상 첨부 안된다 벨로그...
활성화시키기 버튼을 누르면 위 activeFn 함수가 실행돼 안녕버튼이 활성화된다.
쓸모있는 기술자