문제 : 메인 사진을 랜덤하게 바꾸는 JS 짜기
접근 원리 : 항상 어딘가에 데이터 위치를 찾고 (만약에 없으면 데이터를 생성해주면 되지) =>그 데이터의 값을 바꿔주면 됨
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<p id="test" > 클릭한 사진은 다음과 같습니다</p>
<div class=main-pic-box>
<img class=main-pic src="source/85120553.jpeg">
</div>
<div class="all-box">
<div class="thumb-pic-box">
<img class="thumb-pic 1" src="source/85120553.jpeg">
</div>
<div class=thumb-pic-box>
<img class="thumb-pic 2" src="source/elephant_in_tanzania.jpeg">
</div>
<div class=thumb-pic-box>
<img class="thumb-pic 3" src="source/lamb-iStock-665494268-16x9-e1559777676675-1200x675.jpeg">
</div>
</div>
<button type="button" id="change-button">button</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
// document.querySelector('#test').textContent="안녕"
$('#test').html('클릭한 사진은 다음과 같습니다').addClass('yellow-bg')
// 메인 화면을 하나 보여주고 기본 값은 완료
/*
만약에 버튼을 누르면 랜덤하게 다른 사진으로 보여주는 함수
*/
//addEventListener와 같은 형태.
$('#change-button').on('click', function(){
// 목적: 만약에 버튼을 누르면 랜덤하게 다른 사진으로 보여주는 함수
// 순서:
// 1.버튼 클릭 이벤트가 일어 났을 때 함수 만들기
// 2. 0부터 2까지 랜덤하게 숫자 뽑기
let random=Math.random()*3
let randomBox=Math.floor(random)
// 3. 함수가 실행
// thumb-pic 클레스를 찾아서 메인 함수 src값을 바꿔줌.
document.querySelector(".main-pic").src=document.querySelectorAll('.thumb-pic')[randomBox].src
})
</script>
</body>
</html>결과
추가로 바꾸는 법
button.addEventListener('click',()=>{
alerm.classList.remove('hide')
})
'Javascript' 카테고리의 다른 글
| 정규식으로 이메일 유효성 검사하기 (0) | 2021.11.08 |
|---|---|
| 제이쿼리 css 추가 하기 & animate 넣기 (0) | 2021.11.04 |
| jQuery 기본 문법 이해 (0) | 2021.10.28 |
| onClick 속성을 이용하여 Validation 함수 구현방법 (0) | 2021.10.28 |
| 버튼 클릭했을 때 화면을 보여주거나 가리기 (0) | 2021.10.27 |