JavaScript에서 버튼 토글
이 튜토리얼에서는 JavaScript에서 조건문을 사용하여 버튼을 토글하는 방법에 대해 설명합니다.
JavaScript에서 조건문을 사용하여 버튼 토글
JavaScript에서 if-else 문과 같은 조건문을 사용하여 버튼을 토글할 수 있습니다. JavaScript에서 값, 클래스, ID 및 색상과 같은 요소의 거의 모든 속성을 토글할 수 있습니다.
요소의 속성을 변경하려면 해당 ID 또는 클래스를 사용하여 요소를 가져와야 합니다. 또한 속성 이름을 사용하여 속성 값을 변경할 수 있습니다.
예를 들어 if-else 문과 value 속성을 사용하여 버튼을 만들고 내부 텍스트를 변경해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="button" id="myButton" value="NO"
onclick="Buttontoggle();">
</form>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("myButton");
if(t.value=="YES"){
t.value="NO";}
else if(t.value=="NO"){
t.value="YES";}
}
</script>
</html>
위의 프로그램에서 사용자가 버튼을 클릭할 때마다 호출되는 Buttontoggle() 함수를 만들었습니다. 버튼 안의 텍스트를 토글합니다.
이 코드를 실행하려면 이 코드를 HTML 파일로 복사하고 아무 브라우저에서나 파일을 열면 버튼이 표시됩니다. 같은 방식으로 요소의 모든 속성을 토글할 수 있습니다. if-else 문 대신 switch 문을 사용할 수도 있습니다. 이제 버튼과 if-else 문을 사용하여 텍스트를 전환해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Text</button>
<div id="123">Some Text</div>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
if(t.innerHTML=="Some Text"){
t.innerHTML="Toggled Text";}
else{
t.innerHTML="Some Text";}
}
</script>
</html>
위의 코드에서는 버튼을 사용하여 해당 ID를 사용하여 다른 요소의 텍스트를 토글했습니다. getElementById 속성은 id를 사용하여 요소를 가져오는 데 사용되며 innerHTML 속성은 div 요소의 텍스트를 가져오는 데 사용됩니다. classList.toggle() 속성을 사용하여 요소의 클래스를 토글할 수도 있습니다.
예를 들어 너비, 패딩, 배경색, 색상 및 글꼴 크기와 같은 일부 클래스 myClass 속성을 설정할 텍스트 요소와 스타일 시트를 만들어 보겠습니다. 이제 myClass 클래스와 classList.toggle() 속성을 사용하여 div 요소의 클래스를 토글할 수 있습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Class</button>
<div id="123">Some Text</div>
</body>
<style type="text/css">
.myClass {
width: 50%;
padding: 33px;
background-color: green;
color: white;
font-size: 33px;
}
</style>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
t.classList.toggle("myClass");
}
</script>
</html>
위의 프로그램에서 클래스를 토글하는 데 사용할 버튼과 클래스가 토글되는 div 요소를 만들었습니다. 스타일 시트를 사용하여 토글 버튼을 클릭할 때 텍스트에 적용되는 클래스의 일부 속성을 설정했습니다.
