onclick 이벤트와 getElementById 함수 실습

객체를 이용해서 이벤트를 실행하는 사용자의 행위

함수는 객체가 실행하는 실행문

 

---

버튼 클릭시 next 버튼 이미지가 다음으로, prev 버튼클릭시 이미지가 이전으로 

 

---

html 로 바로 이벤트를 걸어 실행시켜보자. 

 

 

          <button onclick="return prev()">

            <img src="images/left_btn.png" alt="이전 버튼" />

          </button>

          <img id="gallery" src="images/img1.jpg" alt="이미지 갤러리" />

          <!-- onclick은 클릭이벤트 / return은 함수실행 / next()는 함수명 -->

          <!-- 클릭하면 next 라는 함수를 실행하겠다. -->

 

          <button onclick="return next()">

            <img src="images/right_btn.png" alt="다음 버튼" />

          </button>

 

 

button 에 클릭 이벤트를 걸어 return 함수로 next, prev 함수명을 각각 실행시키자. 

 

---

스크립트 문에 함수 입력 

 

 

// 변수설정

      var num = 1;

      /*  함수 next()설정

      1. 변수 num이 1씩 증가 (단, num이 7보다 커지면 다시 1)

      2.  #gallery의 src 속성 중 속성값의 일부를 변경 */

      function next() {

        // num이 1씩 증가 (아직은 변수에만 반영)

        num++;

        // 7다음에는 다시 1이된다

        if (num > 7) num = 1;

        // 아이디를 가져온다는 메서드

        // document.getElementById('gallery') 는 css의 #gallery 선택자와 같은 의미

        document.getElementById('gallery').src = 'images/img' + num + '.jpg';

      }

 

 

먼저 num 이라는 변수명을 만들어 숫자 1을 부여한다. 

 

함수 function 을 열어 next 버튼 함수명을 대입한다. 

num++; 

num 의 숫자가 1에서 증가하면

 

 

 

html 태그안의 이미지 숫자 1,2,3,4,.... 로 변경되도록 getElementById 메서드를 사용하여 바꿔준다.

<img id="gallery" src="images/img1.jpg" alt="이미지 갤러리" />

 

document.getElementById('gallery').src = 'images/img' + num + '.jpg'; 

이미지 경로의 숫자가 자동으로 대입되도록 연산자함수를 사용

 

 

그리고 조건문 if 로 

if (num > 7) num = 1;

7보다 커지면 다시 1로 돌아도록 걸어준다. 

 

 

 

---

반대로 

 

      /*  함수 prev()설정

      1. 변수 num이 1씩 감소 (단, num이 1보다 작아지면 다시 7)

      2.  #gallery의 src 속성 중 속성값의 일부를 변경 */

      function prev() {

        num--;

        if (num < 1) num = 7;

        document.getElementById('gallery').src = 'images/img' + num + '.jpg';

      }

 

 

---

현재작성문은 바닐라 자바스크립트 방식이다.