[js] 클릭 이벤트 후 이미지 변경, 컬러 변경, 팝업창 오픈

 

간단한 자바스크립트, 클릭 이벤트를 이용하여
3가지 동작을 구현하겠습니다.

구현내용

 

· 클릭시마다 이미지 변경
· 클릭시마다 컬러 변경
· 클릭 후 팝업창 오픈

 

화면 결과

 

 

 

<html, javascript> 코드

<div class="box">
  <div>
    <img src="https://placeimg.com/200/200/1" class="image">
  </div>
  <div>
    <button id="btn1">이미지 바꾸기</button>
  </div>
</div>

<div class="box">
  <div class="bgColor"></div>
  <div>
    <button id="btn2">컬러 바꾸기</button>
  </div>
</div>

<div class="box">
  <button id="btn3">팝업창</button>
</div>

<script>

  let btn1 = document.getElementById("btn1");
  let btn2 = document.getElementById("btn2");
  let btn3 = document.getElementById("btn3");
  let i = 1;
  let color = ["#592C45", "#F2EFBB", "#F2C094", "#F2A488", "#D96B62"];

  btn1.addEventListener('click', function(idx) {
    idx && i++;
    document.querySelector(".image").setAttribute("src", "https://placeimg.com/200/200/" + i);
  });


  btn2.addEventListener('click', function() {
    let num = Math.floor(Math.random() * color.length);
    document.querySelector(".bgColor").style.backgroundColor = color[num];
  });

  btn3.addEventListener('click', function() {
    window.open("https://placeimg.com/300/300/ANY", "", "width= 400, height= 400, left= 0, top= 0");
  });

</script>

 

<css>코드

.box {
	text-align: center;
	margin-bottom: 10px;
}

.bgColor {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	background-color: #f9b514;
}

한번에 보기