자바스크립트를 활용해서 이미지를 변경하는 3가지 방법에 대해 살펴본다.
엘리먼트 노드의 속성 변경하기 - 첫번째 방법
- 숫자를 입력하면 지정한 이미지가 출력된다.
각 이미지를 변수에 담아 이미지 소스에 링크하는 단순하지만 손이 많이 가는 방법
changeButton.onclick = function(){
let no = srcInput.value;
if(no==1){img.src=`https://blog.kakaocdn.net/dn/omqpa/btqI6OjdlKv/1PEwqwocTX6TzfNpk5iIm1/img.jpg`;
} else if(no == 2){
img.src=`https://blog.kakaocdn.net/dn/IdwvU/btqI9F0BuQD/hN37C7UkwoelzTcKAMLsK1/img.jpg`;
} else if(no == 3){
img.src=`https://blog.kakaocdn.net/dn/SnbQs/btqI9n6wDGu/ulcUNQKmpSz4CSDqD09jlk/img.jpg`;
} else if(no == 4){
img.src=`https://blog.kakaocdn.net/dn/KghHD/btqJij9Qlzf/dAbKJ6WnlZw25IcSkKOMxK/img.jpg`;
} else if(no == 5){
img.src=`https://blog.kakaocdn.net/dn/MXHLL/btqJizdLucJ/XtzIZKgXNlLvW9hdUKAdW1/img.jpg`;
} else{
img.src=`https://blog.kakaocdn.net/dn/b36jWS/btqI7yf93SC/ZyIkcUF1XcwGrBdxuk0I2K/img.jpg`;
}
}
엘리먼트 노드의 속성 변경하기 - 두번째 방법
- 옵션을 선택하면 이미지가 바뀐다.
selct의 옵션 value 값을 활용하는 방법 - 가장 무난한 방법
changeButton2.onclick = function(){
img2.src=`${imgSelect2.value}`;
}
엘리먼트 노드의 속성 변경하기 - 세번째 방법
- 인풋창에서 원하는 이미지 주소를 선택하면 이미지가 바뀐다.