[JS] 별점 드래그 구현
완성본 코드 See the Pen Drag Star by hyukson (@hyukson) on CodePen. 코드 풀이 ★★★★★ ★★★★★ // JAVASCRIPT CODE const drawStar = (target) => { document.querySelector(`.star span`).style.width = `${target.value * 10}%`; } // JQUERY
gurtn.tistory.com
📌 현재 상황
프로젝트 별점 구현을 위해 구글링 하던 중 이분의 티스토리에서 간편하게 이해하기 쉬운 코드를 찾음!
VSCode에서 잘 구현되길래 행복했는데 STS에 옮긴 후 서버를 돌렸을 때는 별의 색이 채워지지 않음
내가 이해한 이분의 코드를 간략하게 설명하자면 아래와 같음
👉🏻 input range 위로 position을 통해 별을 덮어 씌움
👉🏻 별은 회색 5개, 채워진 색 5개로 2세트가 있음
👉🏻 드래그(range의 움직임)이 있을 때 별의 css를 조작(회색 별에서 채워진 색 별로 바꾸기)하여 별점이 채워지는 듯한 효과를 줌
👉🏻 input 태그의 투명도를 조절하여 보이지 않게 함
사용자 입장: 어? 드래그 하니까 별점이 채워지네!
기존 HTML 코드
<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>
기존 CSS 코드
/* 별점 시작 */
#starScoreArea {
font-size : 20px;
text-align : center;
}
.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;
}
기존 JavaScript & jQuery 코드
<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>
👉🏻 주석이 아닌 부분은 원래 코드
❌ 시도 1 : document.querySelector로 요소를 선택하는 구문을 바꿔 봄
👉🏻 역시나 VScode로 html 실행은 잘되나 서버에서는 안 먹힘
❌ 시도 2 : 화살표 함수를 function(target) { }과 같이 바꿔 봄
👉🏻 역시나 VScode로 html 실행은 잘되나 서버에서는 안 먹힘
❌ 시도 3 : 백틱 문법을 홑따옴표, 쌍따옴표로 바꿔 봄
👉🏻 아예 실행되지 않음
❌ 시도 4: $(달러 사인)이 문제일 수도 있다는 말을 듣고 ${}를 뺀 target.value를 콘솔에 찍어 봄
👉🏻 콘솔에는 찍히나 target.value를 css의 value로 넣었을 때는 작동하지 않음
👉🏻 (target.value *10)%, (target.value*0.1), ... 모두 안 됨
❗️❌시도 5 : CSS 구문에 문제가 있음을 확신
👉🏻 target.value가 콘솔에 찍힌다는 건 oninput 이벤트도 잘 먹혔고, target(해당 요소)의 value(값)도 잘 가지고 온다는 것
❗️ 시도 6: CSS에 10%라는 고정값을 넣어봄
👉🏻 서버에서 돌렸을 때 반 개의 별이 채워지는 것을 확인
👉🏻 $(달러 사인)에 문제가 있음을 확신
$(달러 사인)이 자바스크립트에서 문제가 되는 이유
html에서는 잘 실행되던 $(달러 사인)이 jsp 코드에 들어오면서 EL구문과 충돌이 생긴 듯함
즉, ${target.value}를 자바스크립트는 EL구문으로 인식하여
"너 target이라는 애를 정의한 적 없는데 무슨 value값을 찾으라는 거야?"라고 생각하는 것!
(추정)
자바스크립트에서는 없는 값을 찾으면 오류 메시지 없이 그 값을 뽑지도 않고, 관련 코드가 실행되지도 않음
👉🏻 오케이... 달러 사인 빼고 이것저것 시도해 보자!
❌ 시도 7: target.value를 아예 변수로 빼고 콘솔에 해당 변수를 찍어봄
👉🏻 target.value를 찍었을 때와 동일함 (변수에 값 잘 담김)
👉🏻 하지만 해당 변수만 css value 값으로 넣었을 때는 변화 없음
⭕️ 시도 8 : 변수 + "%"
내가 주고자 하는 속성은 css 중에서도 width임!
👉🏻 width는 숫자 뒤 px 혹은 %로 줬음
👉🏻 변수에 숫자값까지만 담아 놓고 css 속성에 변수 + '%'의 형태와 같이 문자열로 함께 붙여 준다면?
<script>
const drawStar = (target) => {
var score = target.value * 10;
$(".star span").css({ width: score + "%" });
}
</script>
서버에서도 별이 찍힌다! 감격
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/017.gif)