📗 self-study/📗 KH정보교육원 당산지원
[11/29 백업] 서버에 별점 올리니까 안 됨...
천재강쥐
2022. 11. 29. 22:03
<!-- 유저가 쓴 별점/코멘트가 있을 때 -->
<br>
<form id="starScoreArea">
<div id="commentTitle"><b>유저닉네임</b> 님의 평가입니다!</div>
<span class="star">
★★★★★
<span>★★★★★</span>
<input type="range" oninput="drawStar(this)" value="1" step="1" min="0" max="10">
</span>
<br><br>
<div id="loginUserComment">
이 영화... 대박적이다
<button>수정</button> <button>삭제</button>
</div>
</form>
<br>
<script>
const drawStar = (target) => {
// console.log(target.value); // 0~10 드래그별로 나옴
var score = $(target).val();
console.log(score);
// $(".star span").css({ width: `${target.value * 10}%` }); // 원래 문법
// $(".star span").css("width", "10%"); // 먹힘
$(".star span").css("width", $(target).val() * 0.1);
}
</script>
콘솔에는 잘 뜨는데
css가 안 먹음...
$(target).val()에 대한 값을 변수로 따로 빼고 css에 넣어 봐도 안 됨
<script>
const drawStar = (target) => {
// console.log(target.value); // 0~10 드래그별로 나옴
var score = $(target).val()*0.1;
console.log(score);
// $(".star span").css({ width: `${target.value * 10}%` }); // 원래 문법
// $(".star span").css("width", "10%"); // 먹힘
$(".star span").css("width", score);
}
</script>0.1까지 변수로 빼 봐도 css 안 먹음...
$(target).val()에 대한 값을 변수로 따로 빼고 css에 넣어 봐도 안 됨
심지어 지금 0.3이랑 0.6, 0.7은 이상합니다요...
백업용
vscode html
<!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>콘텐츠 코멘트 리스트 영역</title>
<link href="commentListView.css" rel="stylesheet">
<!-- jQuery 라이브러리 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="wrap">
<!-- 플로팅 버튼 영역 -->
<jsp:include page="../common/floatingButton.jsp" />
<!-- 헤더 영역 -->
<jsp:include page="../common/header.jsp" />
<div id="contentsArea">
여기는 콘텐츠 영역입니다
</div>
<div>
<span>회차</span>
<span>코멘트</span>
</div>
<div id="commentArea">
<hr>
<!-- 유저가 쓴 별점/코멘트가 없을 때: 별점 -->
<br>
<form id="starScoreArea">
<div id="commentTitle"><b>유저닉네임</b> 님, 이 콘텐츠 어떠셨나요?</div>
<span class="star">
★★★★★
<span>★★★★★</span> <!-- 내일 다시!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<input type="range" oninput="drawStar(this)" value="1" step="1" min="0" max="10">
</span>
</form>
<br>
<hr>
<!-- 유저가 쓴 별점/코멘트가 있을 때 -->
<br>
<form id="starScoreArea">
<div id="commentTitle"><b>유저닉네임</b> 님의 평가입니다!</div>
<span class="star"> ★★★★★
<span>★★★★★</span>
<input type="range" oninput="drawStar(this)" value="1" step="1" min="0" max="10">
</span>
<br><br>
<div id="loginUserComment">
이 영화... 대박적이다
<button>수정</button> <button>삭제</button>
</div>
</form>
<br>
<script>
const drawStar = (target) => {
// console.log(target.value);
//var score = target.value;
//console.log(score);
// document.querySelector(`.star span`).style.width = `10%`; // 10% css 먹힘
//document.querySelector(`.star span`).style.width = score; // 안 됨
// document.querySelector(`.star span`).style.width = target.value * 0.1; // ㄴㄴ
$(".star span").css({ width: `${target.value * 10}%` });
}
</script>
<hr>
<table id="commentListTable">
<thead>
<tr>
<th colspan="3" id="commentInfo" width="70%" height="50px" align="left">현재 xx명의 UFO 이용자가 코멘트를 남겼습니다.</th>
<td><button id="commentListView">더보기</button></td>
</tr>
</thead>
<tbody>
<tr class="personalComment" width="100%;">
<th id="nickname" width="20%;">드라마광</th>
<td id="reviewStar" width="10%;">★ 3.0</td>
<td id="review_content" width="60%">이 영화... 꽤 볼만해요</td>
<!-- 타인이 쓴 코멘트만 신고 버튼 보여야 함 -->
<td id="review_report"><button type="button" id="commentReport" data-toggle="modal" data-target="#commentReportModal">신고</button></td>
</tr>
<!-- 위의 내용을 반복 돌릴 것! 여기서부터는 하드코딩 -->
<tr class="personalComment">
<th>뿡뿡이</th>
<td>★ 2.0</td>
<td>이 영화... 나만 별론가</td>
<td id="review_report"><button type="button" id="commentReport" data-toggle="modal" data-target="#commentReportModal">신고</button></td>
</tr>
<tr class="personalComment">
<th>재탕중</th>
<td>★ 5.0</td>
<td>이 영화보다 엄청난 영화는 없습니다</td>
<td id="review_report"><button type="button" id="commentReport" data-toggle="modal" data-target="#commentReportModal">신고</button></td>
</tr>
</tbody>
</table>
<form id="report-form" action="" method="post" name="reportForm">
<!-- 코멘트 신고 모달창 -->
<div class="modal" id="commentReportModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title">코멘트 신고</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<b>신고 사유</b><br>
<select name="reportReason">
<option value="사유1" selected>사유1</option>
<option value="사유2">사유2</option>
<option value="사유3">사유3</option>
<option value="사유4">사유4</option>
<option value="기타">기타</option>
</select>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
<button type="submit" class="btn btn-info" id="reportSubmitButton">신고</button>
</div>
<script>
// 모달창의 신고 버튼 누르면 action 따라서 url 옮겨라
$("#reportSubmitButton").on("click", function() {
document.getElementById("report-form").submit();
});
</script>
</div>
</div>
</div>
</form>
<!-- 코멘트 신고 모달창 끝 -->
</div> <!-- 댓글 영역 끝 -->
</div> <!-- 전체 영역 끝 -->
</body>
</html>
vscode css
#commentArea {
background-color: rgb(23, 26, 33);
color : white;
}
/* 별점 시작 */
#starScoreArea {
font-size : 20px;
text-align : center;
}
#loginUserComment {
font-size : 13px;
}
#commentInfo {
font-size : 20px;
}
#commentListView {
color : rgb(107, 109, 106);
background-color: transparent;
text-decoration: none;
border: none;
font-size : 15px;
font-weight : bold;
cursor: pointer;
}
.star {
position: relative;
font-size: 40px;
color: #ddd;
border-radius : 10px;
}
.star input {
width: 100%;
height: 100%;
position: absolute;
left: 0;
opacity: 0;
cursor: pointer;
}
.star span {
width: 0;
position: absolute;
left: 0;
color: #64ffda;
overflow: hidden;
pointer-events: none;
}
/* 다른 사람 코멘트 테이블 */
#commentListTable {
width : 100%;
margin-right : auto;
margin-left : auto;
}
.personalComment {
height : 50px;
}
/* 신고 버튼 */
#commentReport {
font-size : 13px;
background-color :rgb(144, 148, 147);
border : 3px;
border-radius : 3px;
}
/* 신고 모달창 */
#commentReportModal {
color :rgb(23, 26, 33);
}
.btn-submit {
background-color:rgb(23, 26, 33);
}
현재 코드 html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<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>콘텐츠 코멘트 리스트 영역</title>
<link href="resources/css/commentListView.css" rel="stylesheet">
<link href="resources/css/mainCss.css" rel="stylesheet">
<!-- jQuery 라이브러리 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="wrap">
<!-- 플로팅 버튼 영역 -->
<jsp:include page="../common/floatingButton.jsp" />
<!-- 헤더 영역 -->
<jsp:include page="../common/header.jsp" />
<div id="contentsArea">
여기는 콘텐츠 영역입니다
</div>
<div>
<span>회차</span>
<span>코멘트</span>
</div>
<div id="commentArea">
<hr>
<!-- 유저가 쓴 별점/코멘트가 없을 때: 별점 -->
<br>
<form id="starScoreArea">
<div id="commentTitle"><b>유저닉네임</b> 님, 이 콘텐츠 어떠셨나요?</div>
<span class="star">
★★★★★
<span>★★★★★</span> <!-- 내일 다시!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<input type="range" oninput="drawStar(this)" value="1" step="1" min="0" max="10">
</span>
</form>
<br>
<hr>
<!-- 유저가 쓴 별점/코멘트가 있을 때 -->
<br>
<form id="starScoreArea">
<div id="commentTitle"><b>유저닉네임</b> 님의 평가입니다!</div>
<span class="star"> ★★★★★
<span>★★★★★</span>
<input type="range" oninput="drawStar(this)" value="1" step="1" min="0" max="10">
</span>
<br><br>
<div id="loginUserComment">
이 영화... 대박적이다
<button>수정</button> <button>삭제</button>
</div>
</form>
<br>
<script>
const drawStar = (target) => {
// console.log(target.value);
var score = target.value;
console.log(score);
// document.querySelector(`.star span`).style.width = `10%`; // 10% css 먹힘
document.querySelector(`.star span`).style.width = score;
// document.querySelector(`.star span`).style.width = target.value * 0.1;
// $(".star span").css({ width: `${target.value * 10}%` });
}
</script>
<hr>
<table id="commentListTable">
<thead>
<tr>
<th colspan="3" id="commentInfo" width="70%" height="50px" align="left">현재 xx명의 UFO 이용자가 코멘트를 남겼습니다.</th>
<td><button id="commentListView">더보기</button></td>
</tr>
</thead>
<tbody>
<tr class="personalComment">
<th id="nickname" width="150px;">드라마광</th>
<td id="reviewStar" width="70px;">★ 3.0</td>
<td id="review_content" width="500px">이 영화... 꽤 볼만해요</td>
<!-- 타인이 쓴 코멘트만 신고 버튼 보여야 함 -->
<td id="review_report"><button type="button" id="commentReport" data-toggle="modal" data-target="#commentReportModal">신고</button></td>
</tr>
<!-- 위의 내용을 반복 돌릴 것! 여기서부터는 하드코딩 -->
<tr>
<th>뿡뿡이</th>
<td>★ 2.0</td>
<td>이 영화... 나만 별론가</td>
<td id="review_report"><button type="button" id="commentReport" data-toggle="modal" data-target="#commentReportModal">신고</button></td>
</tr>
<tr>
<th>재탕중</th>
<td>★ 5.0</td>
<td>이 영화보다 엄청난 영화는 없습니다</td>
<td id="review_report"><button type="button" id="commentReport" data-toggle="modal" data-target="#commentReportModal">신고</button></td>
</tr>
</tbody>
</table>
<form id="report-form" action="" method="post" name="reportForm">
<!-- 코멘트 신고 모달창 -->
<div class="modal" id="commentReportModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title">코멘트 신고</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
<%--
<% if(loginUser != null) { %>
<input type="hidden" name="memNo" value="<%= loginUser.getMemNo() %>"> // 신고한 사람
<% } %>
<input type="hidden" name="genNo" value="<%= b.getGenNo() %>"> // 코멘트 번호
<input type="hidden" name="reportedMemNo" value="<%= b.getMemNo() %>"> // 신고된 사람
--%>
</div>
<!-- Modal body -->
<div class="modal-body">
<b>신고 사유</b><br>
<select name="reportReason">
<option value="사유1" selected>사유1</option>
<option value="사유2">사유2</option>
<option value="사유3">사유3</option>
<option value="사유4">사유4</option>
<option value="기타">기타</option>
</select>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
<button type="submit" class="btn btn-info" id="reportSubmitButton">신고</button>
</div>
<script>
// 모달창의 신고 버튼 누르면 action 따라서 url 옮겨라
$("#reportSubmitButton").on("click", function() {
document.getElementById("report-form").submit();
});
</script>
</div>
</div>
</div>
</form>
<!-- 코멘트 신고 모달창 끝 -->
</div> <!-- 댓글 영역 -->
</div> <!-- 전체 영역 -->
</body>
</html>
현재 코드 css
/* 전체 화면 */
.wrap{
color: rgb(255, 255, 255);
}
#commentArea {
/* 세로 크기 : 1550(px) */
width: 100%;
color: rgb(255, 255, 255);
position: relative;
}
/* 콘텐츠 영역 */
#contentsArea {
height : 1000px;
}
/* 별점 시작 */
#starScoreArea {
font-size : 20px;
text-align : center;
}
#loginUserComment {
font-size : 13px;
}
#commentInfo {
font-size : 20px;
}
#commentListView {
color : rgb(107, 109, 106);
background-color: transparent;
text-decoration: none;
border: none;
font-size : 15px;
font-weight : bold;
cursor: pointer;
}
.star {
position: relative;
font-size: 40px;
color: #ddd;
border-radius : 10px;
}
.star input { /* 내일 다시!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
width: 100%;
height: 100%;
position: absolute;
left: 0;
opacity: 0;
cursor: pointer;
}
.star span {
width: 0;
position: absolute;
left: 0;
color: #64ffda;
overflow: hidden;
pointer-events: none;
}
/* 신고 버튼 */
#commentReport {
font-size : 13px;
background-color :rgb(144, 148, 147);
border : 3px;
border-radius : 3px;
}
/* 신고 모달창 */
#commentReportModal {
color :rgb(23, 26, 33);
}
.btn-submit {
background-color:rgb(23, 26, 33);
}