안녕하세요 4주차 숙제 질문입니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

안녕하세요 4주차 숙제 질문입니다.

undefined주차

김*영

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

안녕하세요. 4주차 숙제가 끝나고 보다가 갑자기 궁금해진게 있는데 해보다 어려워서 질문드립니다.

응원을 남기고 아래 코멘트 갯수가 5개 이상이면 지워지는 조건문을 걸어보고 싶은데

어떻게 해야될까요?

if (comment_list <5){

$('#comment_list').empty()

}

윗부분이 만들기 어렵습니다 ..

작성한 코드 및 에러 메세지

<!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">

    <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=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"rel="stylesheet"><style>
        * {
            font-family: 'Noto Serif KR', serif;
        }

        .mypic {
            width: 100%;
            height: 300px;


            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://www.gannett-cdn.com/-mm-/12d2adbca4438b41c7a469a898fc59d55d99c8f1/c=0-25-1279-747/local/-/media/2016/08/12/Phoenix/Phoenix/636066102766755546-guns-n-roses.jpg?width=660&height=373&fit=crop&format=pjpg&auto=webp');
            background-position: center 12%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .buts {
            display: flex;
            flex-direction:row;
            align-items: center;
            justify-content: center;

            margin-top: 25px;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }




        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .temp1 {
            white-space: nowrap;
            width: 190px;
            border: 1px solid hotpink;
            overflow: hidden;
            text-overflow: clip;
            text-align: center;
        }
    </style><script>
        $(document).ready(function () {
            set_temp()
            show_comment()
        });

        function set_temp() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        }

        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: 'POST',
                url: '/homework',
                data: {'name_give': name, 'comment_give': comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }

        function show_comment() {

            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    let rows = response['comments']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let comment = rows[i]['comment']

                        let temp_html = `<div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>${comment}</p>
                <footer class="blockquote-footer">${name}</footer>
            </blockquote>
        </div>`
                        $('#comment-list').append(temp_html)

                    }
                }
            });
        }
    </script>
</head>
<body>
<div class="mypic"><h1>gunsnroses 팬명록</h1><p class="temp1">❄현재기온: <span id="temp">36</span>도❄</p>
</div>
<div class="mypost"><div class="form-floating mb-3"><input type="text" class="form-control" id="name" placeholder="url"><label for="floatingInput">닉네임</label></div><div class="form-floating"><textarea class="form-control" placeholder="Leave a comment here" id="comment"style="height: 100px"></textarea><label for="floatingTextarea2">응원댓글</label></div><span class="buts"><button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button></span>
</div>
<div class="mycards" id="comment-list">

</div>
</body>
</html>

댓글 알림