티스토리 뷰

IT tech Coding/javascript

자바스클립트, 한번 누르면 전구가 켜지고,한번 더 누르면 전구가 꺼지는 자바스크립트 구문

Coding Life 2019. 7. 7. 15:27
반응형

자바스크립트만 잘 사용해도 멋진 웹을 만들 수 있습니다.

간단하게 전구의 등이 켜지고 꺼지는 것을 자바스크립트로 구현하는 것인데요,

W3schools에서 보고 함께 공유하고자 올려봅니다.

너무 신통방통한 웹프로그램에 푹~ 빠져살고 있어요. 정말 좋은 기능들 유용한 기능들을 접목해서 멋진 프로그램 만들어 보고 싶습니다.

전구가 켜졌을때...

 

 

 

 

 

 

전구가 꺼졌을때...

 

 

 

 

 

 

 

그럼, 위의 동작을 프로그램으로 구현해 보면?

<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
  var pic;
  if (sw == 0) {
    pic = "pic_bulboff.gif"
  } else {
    pic = "pic_bulbon.gif"
  }
  document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>

</body>
</html>

 

반응형
저작자표시

'IT tech Coding > javascript' 카테고리의 다른 글

자바스크립트에서 php 함수를 호출하는 방법, js에서 php 함수 호출  (0) 2019.07.08
html select문 value값을 자바스크립트로 가져오는 방법  (0) 2019.07.08
html select문 선택시 자바스크립트 실행하는 방법, 초간단한 예제로 설명  (0) 2019.07.04
[JavaScript] select박스에서 값 변경시 이벤트 처리방법  (0) 2019.06.25
[자바스크립트] 자바스크립트에서 배열 선언부터 사용까지 알아보자  (0) 2019.06.09
댓글