[days01] 버튼으로 전구 켜고끄기

Web/JavaScript

[days01] 버튼으로 전구 켜고끄기

　다연　 2020. 12. 9. 23:27

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<!-- 스타일변경/ 내용 변경/ [속성변경] -->
<!-- img#img_bulb[src="../images/pic_bulboff.gif"] -->
<img src="../images/pic_bulboff.gif" alt="" id="img_bulb" />
<!-- <img src="../images/pic_bulbon.gif" alt="" id="img_bulb2" /> -->
<!--이미지를 두개 겹쳐서 하나를 올리면 들왔다 나왔다 하는 것처럼 보임 -->
<br>
<button id="btn" onclick="bulb_OnOff()">Turn On</button>

<script>
function bulb_OnOff() {
	//img 요소의 src속성을 변경
	var img = document.getElementById("img_bulb");
	var btn =  document.getElementById("btn");
	if (btn.innerText =="Turn On") {
		img.src="../images/pic_bulbon.gif";
		btn.innerText="Turn Off";
	} else {
		img.src="../images/pic_bulboff.gif";
		btn.innerText="Turn On";
	}
}

</script>
</body>
</html>

2) boolean형 sw - 이렇게 변경 가능하다.

<script>
var sw = false;
function bulb_OnOff() {

	var img = document.getElementById("img_bulb");
	var btn =  document.getElementById("btn");
	
	
	 if (!sw) { //sw==false
		img.src="../images/pic_bulbon.gif";
		btn.innerText="Turn Off";
		sw =true;
	} else {
		img.src="../images/pic_bulboff.gif";
		btn.innerText="Turn On";
		sw=false;
	} 
}


</script>

3) 삼항연산자 - 이렇게도 변경 가능하다.

<script>
var sw = false;
function bulb_OnOff() {

	var img = document.getElementById("img_bulb");
	var btn =  document.getElementById("btn");
	
	img.src = "../images/pic_bulb"+(sw?"off":"on")+".gif";
	btn.innerText = sw?"Turn On":"Turn Off";
	
	sw = !sw;
}


</script>

버튼을 2가지로 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<img src="../images/pic_bulboff.gif" alt="" id="img_bulb" />


<br>
<button id="btn1" onclick="bulb_On()">Turn On</button>
<button id="btn2" onclick="bulb_Off()">Turn Off</button>

<script>
function bulb_On() {
	//img 요소의 src속성을 변경
	var img = document.getElementById("img_bulb");	
	img.src="../images/pic_bulbon.gif";
		
		
		//불 켜고나면 on 버튼 비활성화
		document.getElementById("btn1").disabled="disabled";
		document.getElementById("btn2").disabled=false;
}

function bulb_Off() {
	//img 요소의 src속성을 변경
	var img = document.getElementById("img_bulb");
	img.src="../images/pic_bulboff.gif";

		
		document.getElementById("btn1").disabled=false;
		document.getElementById("btn2").disabled="disabled";
	}



</script>
</body>
</html>

jQuery로 바꾸기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<!-- jQuery로 바꾸기 -->
<img src="../images/pic_bulboff.gif" alt="" id="img_bulb" />

<br>
<button id="btn">Turn On</button>

<script>

$(document).ready(function() {
	$("#btn").click(function() {
		//alert($("img").prop("src")); //절대경로 출력
		//alert($("img").attr("src")); //버전차이 //상대경로출력
		//뭐쓰던 상관 없음
		
	//	alert( $("img").attr("src").match("off.gif") ); //off.gif라는 문자열을 돌림
	//	alert( $("img").attr("src").match("on.gif") ); //매치하는 문자열 없으면 null 돌림
	
	
	if ( !$("img").attr("src").match("off.gif")  ) {
		//js는 null을 false 로인식해 ==null이 아니라 !붙혀도 됨
		//불 끄고 텍스트는 Turn Off로 해놓자
		//나중에는 replace 함수를 사용하면 됨(문자열 대체 함수)
		$("img").prop("src","../images/pic_bulboff.gif");
		$("#btn").text("Turn On");
	} else {
		$("img").prop("src","../images/pic_bulbon.gif");
		$("#btn").text("Turn Off");
	}
	
	});//click
});//ready
	
</script>
</body>
</html>

저작자표시 비영리 (새창열림)