NULL

이미지 변경자 추가하기 본문

Front-end/Vanilla JS

이미지 변경자 추가하기

1924 2021. 5. 17. 14:01
var myImage = document.querySelector('img');

myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === './images/img.jpg') {
      myImage.setAttribute ('src','./images/img2.png');
    } else {
      myImage.setAttribute ('src','./images/img.jpg');
    }
}

var myImage 변수에 img를 저장합니다.

 

이미지를 클릭하면 함수를 실행시킵니다.

var mySrc 변수에 src값을 가져온다.

 

그리고 if문으로 조건이 맞다면 img2.png를 불러오고

아니라면 img.jpg를 불러온다.

 

이렇게 하면 조건에 맞다면 이미지가 변경되고

아니라면 이미지는 변경되지않고 그대로 남게 된다.

 

그리고 이미지를 누를때마다 계속 이미지변경이 된다.

'Front-end > Vanilla JS' 카테고리의 다른 글

사용자 이름이 null?  (0) 2021.05.17
개인화된 환영 메시지 추가하기  (0) 2021.05.17
이벤트  (0) 2021.05.16
함수  (0) 2021.05.16
조건문  (0) 2021.05.16
Comments