https://jonghoon7431.github.io/spartafilix/ < 코드 작성중 발생한 문제
1. 첫 화면에서 postingbox(영화 평가 입력 창) 보이지 않게 변경
이유
첫 화면을 간결하게 표현하고싶었으나, 평가 입력창이 처음부터 떠 있는 것은 의도와 맞지 않았다.
영화 기록하기 버튼 클릭시마다 평가 입력창이 나타났다가 사라지도록 작성한 코드의 필요성이 불분명해졌다.
수정
- <html> postingbox(영화 평가 기록 창) 코드 제거
- <script> 영화 기록하기 버튼을 누를 시, 위에서 제거한 코드가 postingbox의 상위 div에 추가되도록 변경 (text() 메서드)
- 버튼을 누를 때마다 postingbox 가 반복해서 추가로 생김 (문제)
- $("#postingbox").empty(); 코드 선행 (해결)
2 . 위 1의 과정 후, 페이지 첫 로드 때에 보더 선이 남아있는 문제 발생
- postingbox css설정에 display: none 설정
- 클릭 이벤트 함수에 $("#postingbox").style.display = "inline"; 추가
-> 콘솔 창 에러 발생
style 프로퍼티의 removeProperty() 메서드를 사용하여 display none 속성을 삭제하는 방향으로 시도하려 했는데,
창 종료 후 다시 켰더니 남은 보더 선이 사라졌다.
첫 문제 발생 원인을 찾아보려했으나 실패
서칭해본 결과, 값이 정의되지 않은 변수를 사용하고자 할 때 발생하는 에러로 보인다.
변수 기본값등 정의를 소홀히 하지 않고, 코드의 연결성을 더욱 잘 생각하며 코드를 짜 나가야할 것 같다
$("#savebtn").click(async function () {
$("#postingbox").empty();
$("#postingbox").append(`
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="영화 이미지 주소" />
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="영화 제목" />
<label for="floatingInput">영화 제목</label>
<div class="input-group mb-3">
<label class="input-group-text" id="star" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>별점 선택</option>
<option value="⭐">⭐</option>
<option value="⭐⭐">⭐⭐</option>
<option value="⭐⭐⭐">⭐⭐⭐</option>
<option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
<option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="coment" placeholder="추천 이유" />
<label for="floatingInput">추천 이유</label>
</div>
<button id="postingbtn" type="button" class="btn btn-danger">등록</button>
</div>`);
$("#postingbox").toggle();
});
'today,weekly I learn' 카테고리의 다른 글
| diary page.2 (0) | 2024.03.21 |
|---|---|
| diary page (0) | 2024.03.20 |
| 파이어베이스사용 , async/await (0) | 2024.03.11 |
| Fetch (0) | 2024.03.07 |
| 버튼으로 작동하는 이미지 슬라이더 생성 중 오류 (0) | 2024.02.28 |
