[chrome app 코딩 챌린지] 2. 버튼 클릭 시 랜덤 이미지 출력

Math.random() 메서드를 이용해 Remind Your Memories Button을 클릭하면 로그인 화면의 이미지 경로가 바뀌어 각기 다른 이미지를 출력하도록 한다.

 

코드 리뷰

<img class="login__img" src="images/welcome.gif" alt="">
<button class="login__random-btn">Remind Your Memories</button>

const imagesArray = ["welcome.gif", "sign-visual.png", "sign-visual.gif"];
const randomButton = document.querySelector(".login__random-btn");
const loginImg = document.querySelector(".login__img");

function changeImagesHandler() {
    const mainVisual = imagesArray[Math.floor(Math.random() * imagesArray.length)];
    loginImg.src = `images/${mainVisual}`;
}

randomButton.addEventListener("click", changeImagesHandler);

• variables time
  • 먼저 image 들을 담아줄 array 를 생성한다. 경로에서 파일만 바뀌므로 array 에는 확장자를 포함한 파일의 이름을 작성해준다.
  • button을 변수로 할당해 선언해준다.
  • 이미지의 scr 경로를 변경해주기 위해 이미지를 변수로 할당해 선언해준다.
• function time
  • constVisual 변수는 앞서 선언해준 배열을 Math.random() 메서드로 랜덤성을 부여해준다. length는 그 길이 만큼이란 뜻이다. (1 * 3) = 3 즉 0부터 2까지 난수를 생성
    • 다만 Math.random은 랜덤한 난수가 나오는 대신 소수점도 나오게 되는데 이 이유는 암호학 상 안전한 난수는 생성될 수 없기 때문이다. 그렇기 때문에 Math.floor()와 함께 사용해준다. Math.floor()는 소수점 1번째 자리를 버림하여 정수를 리턴하는 메서드이다.
  • 이미지의.src 는 " 를 제외한 경로로 작성하게 되므로 생략한 뒤 리터럴 템플릿으로 파일 이름에 난수 생성 변수를 작성해준다.
• event time
  
  • button 변수를 클릭하면 해당 함수를 호출한다.

결과물

아쉬운 점

결과물에서 볼 수 있듯이 아무래도 배열에 포함된 이미지 수가 적어서 그런지 중복되는 이미지가 너무 자주 나온다. 이미지를 추가하거나 중복되서 출력되지 않는 방식의 함수를 더 고민해봐야 겠다.