커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
카운트 함수 질문드립니다.
undefined주차
북마크
한*호
댓글
1
・
추천
0
・
조회수
8
조회수
8
답변 완료


2-1 3분 21초 즈음에 나오는 내용인데요,


클릭하였을 때 카운트를 세서 카운트에 따라 홀,짝을 나눠 작동하는 메세지가 다르게

나타나는 코드입니다.

let count = 0

        function hey() {
            count += 1
            if (count % 2 == 0) {alert('짝수입니다')}
            else { alert('홀수입니다!')}
        }
    </script>
</head>

<body>
    <div class="mytilte">
              <button onclick="hey()"> 본 영화 작성하기</button>


위의 count += 1 일 경우 정상 작동하는데

count + = 1 일 경우 작동하지 않는 이유가 무엇인가요?


띄어쓰기의 차이가 중요한건가요?







밑은 전체 코드입니다.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
            }
        .mytilte {
            background-color: green;
            width: 100%;
            height: 250px;

            background-position: center;
            background-size: cover;
            background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
            url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .mytilte > button {
            width: 200px;
            height: 50px;
            background-color: transparent;
            border-radius: 50px;
            border: 1px solid white;
            margin-top: 10px;
        }
        .mytilte > button:hover {
            border: 3px;
        }

        .mycomment {color: aqua }
        .warp {
            max-width: 1200px;
            width: 95%;
               /*위의 맥스 위드는 최대로 500까지만 볼수있고 그전엔 95퍼센트까지만 볼 수 있게*/
            /*지정 (모바일배려)*/
            margin: 20px auto 0px auto;
            /*마진에 20px은 위쪽 그다음 오토는 오른쪽 0px는 아래쪽 그다음 오토는 왼쪽.
             반시계로 돌아간다*/
        }
        .mypost {

            max-width: 500px;
            width: 95%;
            /*위의 맥스 위드는 최대로 500까지만 볼수있고 그전엔 95퍼센트까지만 볼 수 있게*/
            /*지정 (모바일배려)*/
            margin: 20px auto 20px auto;
            box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;

        }
        .button {
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

        }

        .button > button {
            margin-left: 10px;
            width: 90px;
            height: 60px;
        }





    </style>
    <script>
        // 스크립트를 배울 땐 다섯가지를 기억하자 변수,자료형,함수,조건문,반복문
        // 변수 = 값을 담는거고
        // 자료형 = 이게 숫자인지 문자인지
        // 함수 = 밑의 hey!처럼 함수를 쓰는거
        // 조건문 = if 이렇다면 이렇고, 저렇다면 저런거
        // 반복문 = 계속 반복한다
        // function  is_adult(age){
        //     if (age > 20) {
        //         alert('성인입니다')
        //     }
        //     else (alert('청소년 또는 노인입니다'))
        // }
        // let a_list = ['사과','배','감','딸기']

        // let scores = [
        //     {'name': '철수', 'score': 90},
        //     {'name': '영희', 'score': 85},
        //     {'name': '민수', 'score': 70},
        //     {'name': '형준', 'score': 50},
        //     {'name': '기남', 'score': 68},
        //     {'name': '동희', 'score': 30},
        // ]
        // for (let i = 0; i < scores.length; i++) {
        //     if (scores[i]['score'] > 60) {
        //         console.log(scores[i]['name'])
        //     }
        // }
        let count = 0
        // 카운트는 0에서부터 시작한다 (버튼을 눌렀을때 0에서 시작함)
        function hey() {
            count += 1
            // 눌렀을때 카운트에 1을 더해줘라
            if (count % 2 == 0) {alert('짝수입니다')}
            else { alert('홀수입니다!')}
                // == 의 의미는 같다라는 뜻, 즉 카운트에 2를 나눴을때 나머지가 0과 같을 경우







        }
    </script>
</head>

<body>
    <div class="mytilte">
        <h1> 내 생에 최고의 영화들🚆</h1>
        <button onclick="hey()"> 본 영화 작성하기</button>
    </div>

    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">영화 링크</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별갯수</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>선택해주세요.</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">코멘트</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">코멘트</label>
        </div>
        <div class="button">
            <button type="button" class="btn btn-dark">입력</button>
            <button type="button" class="btn btn-outline-dark">취소</button>

        </div>
    </div>
    <div class="warp">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                         class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">영화 내용</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                         class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">영화 내용</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                         class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">영화 내용</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                         class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">영화 내용</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>


취소
 공유
취소
댓글 0
댓글 알림
나의얼굴