자바스크립트 함수가 작동이 잘 안 됩니다. 채택완료
</p>
<p><%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@taglib prefix="c" uri="<a href="http://java.sun.com/jsp/jstl/core"%>" target="_blank" rel="noopener noreferrer">http://java.sun.com/jsp/jstl/core"%></a>
<c:set var="rPath" value="${pageContext.request.contextPath }/resources"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<a href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"></a>
<link rel="stylesheet" href="../resources/rec_write4.css">
<link href="<a href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"" target="_blank" rel="noopener noreferrer">https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"</a> rel="stylesheet">
<link rel="stylesheet" href=" <a href="https://fonts.googleapis.com/icon?family=Material+Icons" target="_blank" rel="noopener noreferrer">https://fonts.googleapis.com/icon?family=Material+Icons</a> ">
<script src="<a href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script></a>
<script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>
<script type="text/javascript" src="<a href="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script></a>
<script type="text/javascript" src="<a href="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script></a>
<script type="text/javascript" src="<a href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script></a>
<link rel="stylesheet" type="text/css" href="<a href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"</a> />
<title>여행기록write</title>
</head>
<body></p>
<p> <form method="post" action="addDiaryRec" autocomplete="off" enctype="multipart/form-data">
<input type="hidden" id="dia_nick" name="dia_nick" value="${sessionScope.sessionNick}">
<div class="recode">
<div class="section_container">
<div class="sec1">
<div class="recwrite_top">
<div style="text-align: left; width: 55%;">
<p class="recwrite_tit">여행제목</p>
<input id="dia_sub" type="text" class="diatop1" name="dia_sub" placeholder="여행 제목을 적어주세요" value="강릉여행">
<p class="recwrite_tit">한줄평</p>
<input id="dia_summ" type="text" class="diatop2" name="dia_summ" placeholder="여행에 대한 한줄평을 적어주세요" value="친구와 함께한 여행">
</div>
<div class="mfile">
<div style="display: flex; justify-content: space-between; margin-left: 5px;">
<label for="mfile" style="font-size: 20px;">썸네일 사진</label>
<input type="file" id="mfile" name="mfile" style="width: 200px;">
</div>
<div class="col-sm-10">
<img src="${rPath}/images/noimage.jpg" id="imgx" style="width: 100%; height: 214px; border: 1px solid gray; border-radius: 2ex; margin: 5px;">
</div>
</div>
</div>
<div>
<!-- 다이어리 해시태그 DIA_HASHTAG -->
<div>
<ul style="list-style: none; display: flex; justify-content: space-around;">
<li>
<label for="rec_hash_tag1" class="rec_hash_tag_tit">해시태그1</label>
<input id="rec_hash_tag1" class="rec_hash_tag_titWrite" name="rec_hash_tag" type="text" placeholder="'#'없이 해시태그 입력" value="해시태그1">
</li>
<li>
<label for="rec_hash_tag2" class="rec_hash_tag_tit">해시태그2</label>
<input id="rec_hash_tag2" class="rec_hash_tag_titWrite" name="rec_hash_tag" type="text" placeholder="'#'없이 해시태그 입력" value="해시태그2">
</li>
<li>
<label for="rec_hash_tag3" class="rec_hash_tag_tit">해시태그3</label>
<input id="rec_hash_tag3" class="rec_hash_tag_titWrite" name="rec_hash_tag" type="text" placeholder="'#'없이 해시태그 입력" value="해시태그3">
</li>
<li>
<label for="rec_hash_tag4" class="rec_hash_tag_tit">해시태그4</label>
<input id="rec_hash_tag4" class="rec_hash_tag_titWrite" name="rec_hash_tag" type="text" placeholder="'#'없이 해시태그 입력" value="해시태그4">
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 캘린더 영역 -->
<div style="text-align: center;">
<p style="display: inline-block;">일정 :</p>
<div class="calender" style="display: inline-block;">
<input type="hidden" name="startDate" id="startDateInput">
<input type="hidden" name="endDate" id="endDateInput">
</div>
</div>
<!-- 일차 전체 영역 -->
<div class="section_container">
<!-- 1일차 영역 시작 -->
<div class="recwrite_nday">
<div class="sec1" style="text-align: left;">
<h2><input class="inputnoboard" id="rec_sc_nday" style="width: 20px; font-size: 25px;" name="rec_sc_nday" value="1" readonly="readonly">일차</h2>
</div>
<!-- 사진 -->
<div class="rec-sec">
<h3 class="tit"><span>사진</span></h3>
<input id="recimgfile" type="file" id="recimgfile" name="recimgfile">
</div>
<!-- 일정 -->
<div class="rec-sec" style="background-color: gray;">
<h3 class="tit"><span>일정 1</span> </h3>
<div class="rec_scTopDiv">
<input id="rec_sc_loca" type="text" class="rec_sc_tit" name="rec_sc_loca" placeholder="일정명을 적어주세요" value="경포대">
<input type="time" name="rec_sc_time" value="09:00" style="width: 150px;">
<input type="text" class="rec_sc_addr" name="rec_sc_addr" id="keyword" size="15" placeholder="주소를 적어주세요" value="강원 강릉시 경포로 365">
<input type="button" value="주소검색" style="width: 94px;">
</div>
<select id="rec_sc_type" name="rec_sc_type" class="rec_sc_select">
<option>경비종류선택</option>
<option value="교통비">교통비</option>
<option value="숙박비">숙박비</option>
<option value="식비">식비</option>
<option value="관광비">관광비</option>
<option value="기타">기타</option>
</select>
<input id="rec_sc_cost" type="text" name="rec_sc_cost" placeholder="경비금액 입력해주세요" value="10000">
<textarea style='width: 100%; height: 100px; margin-top: 10px;' name='rec_sc_memo' id='rec_sc_memo' placeholder='일정에 대한 Tip!'></textarea>
</div>
<div id="addSection"></div> <!-- 새로운 일정 추가되는 위치 -->
<div class="add-btn"> <!-- 새로운 일정 추가하는 버튼 -->
<input id="scAddBtn" type="button" value="+일정" style="margin: 20px 20px 20px 0;">
</div>
</div> <!-- 1일차 영역 끝 -->
<div class="section_container" id="addDate"></div> <!-- 새로운 일차 추가되는 위치 -->
<div class="add-btn"> <!-- 새로운 일차 추가하는 버튼 -->
<input id="addDateBtn" type="button" value="+일차" style="margin: 20px 20px 20px 0;">
</div>
</div> <!-- 일차 영역 끝-->
<div class="sumi-btn">
<button type="submit">등록</button>
<button type="button">취소</button>
</div>
</div> <!-- recode 끝 -->
</form>
</body>
<script>
var scNum = 2; // 일정 번호 카운트
//var scNum2 = 2;
var scNdayNum = 2;
//var ndayScNum = 2;
$("#scAddBtn").click(function addScInput() {
var addSection = document.getElementById("addSection");
// 일정 전체 Div
var newScDiv = document.createElement("div");
newScDiv.className = "rec-sec";
newScDiv.style.backgroundColor = "gray";
newScDiv.innerHTML = `
<h3 class="tit"><span>일정`
+scNum+
`</span> </h3>
<div class="rec_scTopDiv">
<input id="rec_sc_loca" type="text" class="rec_sc_tit" name="rec_sc_loca" placeholder="일정명을 적어주세요" value="경포대">
<input type="time" name="rec_sc_time" value="09:00" style="width: 150px;">
<input type="text" class="rec_sc_addr" name="rec_sc_addr" id="keyword" size="15" placeholder="주소를 적어주세요" value="강원 강릉시 경포로 365">
<input type="button" value="주소검색" style="width: 94px;">
</div>
<select id="rec_sc_type" name="rec_sc_type" class="rec_sc_select">
<option>경비종류선택</option>
<option value="교통비">교통비</option>
<option value="숙박비">숙박비</option>
<option value="식비">식비</option>
<option value="관광비">관광비</option>
<option value="기타">기타</option>
</select>
<input id="rec_sc_cost" type="text" name="rec_sc_cost" placeholder="경비금액 입력해주세요" value="10000">
<textarea style='width: 100%; height: 100px; margin-top: 10px;' name='rec_sc_memo' id='rec_sc_memo' placeholder='일정에 대한 Tip!'></textarea> </p>
<p> `;
scNum++;
addSection.appendChild(newScDiv);
});
//-----------------------------------------------------------------------------
// 일차 및 사진 추가 버튼
$("#addDateBtn").click(function addNewDay() {</p>
<p> var addDate = document.getElementById("addDate");
var newDay = document.createElement("div");
newDay.className = "recwrite_nday";
newDay.innerHTML = `
<div class="sec1" style="text-align: left;">
<h2><input class="inputnoboard" id="rec_sc_nday" style="width: 20px; font-size: 25px;" name="rec_sc_nday" value=`+scNdayNum+` readonly="readonly">일차</h2>
</div>
<!-- 사진 -->
<div class="rec-sec">
<h3 class="tit"><span>사진</span></h3>
<input id="recimgfile" type="file" id="recimgfile" name="recimgfile">
</div>
<!-- 일정 -->
<div class="rec-sec" style="background-color: gray;">
<h3 class="tit"><span>일정 1</span> </h3>
<div class="rec_scTopDiv">
<input id="rec_sc_loca" type="text" class="rec_sc_tit" name="rec_sc_loca" placeholder="일정명을 적어주세요" value="경포대">
<input type="time" name="rec_sc_time" value="09:00" style="width: 150px;">
<input type="text" class="rec_sc_addr" name="rec_sc_addr" id="keyword" size="15" placeholder="주소를 적어주세요" value="강원 강릉시 경포로 365">
<input type="button" value="주소검색" style="width: 94px;">
</div>
<select id="rec_sc_type" name="rec_sc_type" class="rec_sc_select">
<option>경비종류선택</option>
<option value="교통비">교통비</option>
<option value="숙박비">숙박비</option>
<option value="식비">식비</option>
<option value="관광비">관광비</option>
<option value="기타">기타</option>
</select>
<input id="rec_sc_cost" type="text" name="rec_sc_cost" placeholder="경비금액 입력해주세요" value="10000">
<textarea style='width: 100%; height: 100px; margin-top: 10px;' name='rec_sc_memo' id='rec_sc_memo' placeholder='일정에 대한 Tip!'></textarea>
<div id="addSection${scNdayNum}"></div> <!-- 새로운 일정 추가되는 위치 -->
<div class="add-btn"> <!-- 새로운 일정 추가하는 버튼 -->
<input id="scAddDayNumBtn" type="button" value="+일정" style="margin: 20px 20px 20px 0;" onclick="alert('확인')">
</div>
<script>
// n일차 일정 추가--------------------------------------------------------------------------------
$("#scAddDayNumBtn").click(function addScInput2() {
alert("확인!");
var addSection" + scNdayNum + " = $('#addSection" + scNdayNum + "');</p>
<p> // 일정 전체 Div
var newScDiv" + scNdayNum + " = $('<div>').addClass('rec-sec').css('background-color', 'gray');
newScDiv" + scNdayNum + ".html('<h3 class=\"tit\"><span>일정 ' + scNum + '</span></h3>' +
'<div class=\"rec_scTopDiv\">' +
'<input id=\"rec_sc_loca\" type=\"text\" class=\"rec_sc_tit\" name=\"rec_sc_loca\" placeholder=\"일정명을 적어주세요\" value=\"경포대\">' +
'<input type=\"time\" name=\"rec_sc_time\" value=\"09:00\" style=\"width: 150px;\">' +
'<input type=\"text\" class=\"rec_sc_addr\" name=\"rec_sc_addr\" id=\"keyword\" size=\"15\" placeholder=\"주소를 적어주세요\" value=\"강원 강릉시 경포로 365\">' +
'<input type=\"button\" value=\"주소검색\" style=\"width: 94px;\">' +
'</div>' +
'<select id=\"rec_sc_type\" name=\"rec_sc_type\" class=\"rec_sc_select\">' +
'<option>경비종류선택</option>' +
'<option value=\"교통비\">교통비</option>' +
'<option value=\"숙박비\">숙박비</option>' +
'<option value=\"식비\">식비</option>' +
'<option value=\"관광비\">관광비</option>' +
'<option value=\"기타\">기타</option>' +
'</select>' +
'<input id=\"rec_sc_cost\" type=\"text\" name=\"rec_sc_cost\" placeholder=\"경비금액 입력해주세요\" value=\"10000\">' +
'
' +
'<textarea style=\"width: 100%; height: 100px; margin-top: 10px;\" name=\"rec_sc_memo\" id=\"rec_sc_memo\" placeholder=\"일정에 대한 Tip!\"></textarea>');</p>
<p> addSection" + scNdayNum + ".append(newScDiv" + scNdayNum + ");
});</p>
<p> scNdayNum++;</p>
<p> addDate.append(newDay);
});
</script></p>
<p> <script>
// 이미지 미리보기 함수 => javascript I/O기능을 활용
function readURL(input) {
// input type = "file"의 주소를 가져온다.
if(input.files && input.files[0]){
// 자바스크립트 I/O
var reader = new FileReader();
// 리스너
reader.onload = function(e) {
//console.log("이벤트 발생: "+e.target.result); [이미지 제대로 나온거 보고 주석처리함]
// <img src> 선택자, attr("속성명", "값") => <img src="">
$('#imgx').attr('src', e.target.result); // 이미지를 바이너리로 전달
}
reader.readAsDataURL(input.files[0]);
}
}
// jQuery 문법 - 축약형 [이 문법형식을 많이 사용함!!!]
$(function () {
// JQuery 선택자
// 대상선택자에서 변화를 감지하는 이벤트 : change()
// #mfile : 파일업로드 속성을 선택자
// $('선택자')
$('#mfile').change(function() {
// .val() : input type의 value 속성의 값
//console.log($(this).val()); [해당 이미지명이 제대로 출력된거 보고 주석처리함]
if($(this).val().length>0){
readURL(this);
}else{
console.log("이미지없음");
}
})
})
</script>
<script>
// 여행날짜 계산함수
$(function() {
var datefilterInput = document.createElement("input");
datefilterInput.type = "text";
datefilterInput.name = "datefilter";
datefilterInput.value = "";
$(datefilterInput).addClass("centered-input");
$('.calender').append(datefilterInput);
$(datefilterInput).daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$(datefilterInput).on('apply.daterangepicker', function(ev, picker) {
$('#startDateInput').val(picker.startDate.format('YYYY/MM/DD'));
$('#endDateInput').val(picker.endDate.format('YYYY/MM/DD'));
$(this).val(picker.startDate.format('YYYY/MM/DD') + ' ~ ' + picker.endDate.format('YYYY/MM/DD'));
});
$(datefilterInput).on('cancel.daterangepicker', function(ev, picker) {
$('#startDateInput').val('');
$('#endDateInput').val('');
$(this).val('');
});
});
</script>
</html></p>
<p>에서 버튼을 누르면 일정 공간이 떠야 하는데
</p>
<p>$("#scAddDayNumBtn").click(function addScInput2() {
alert("확인!");
var addSection" + scNdayNum + " = $('#addSection" + scNdayNum + "');</p>
<p> // 일정 전체 Div
var newScDiv" + scNdayNum + " = $('<div>').addClass('rec-sec').css('background-color', 'gray');
newScDiv" + scNdayNum + ".html('<h3 class=\"tit\"><span>일정 ' + scNum + '</span></h3>' +
'<div class=\"rec_scTopDiv\">' +
'<input id=\"rec_sc_loca\" type=\"text\" class=\"rec_sc_tit\" name=\"rec_sc_loca\" placeholder=\"일정명을 적어주세요\" value=\"경포대\">' +
'<input type=\"time\" name=\"rec_sc_time\" value=\"09:00\" style=\"width: 150px;\">' +
'<input type=\"text\" class=\"rec_sc_addr\" name=\"rec_sc_addr\" id=\"keyword\" size=\"15\" placeholder=\"주소를 적어주세요\" value=\"강원 강릉시 경포로 365\">' +
'<input type=\"button\" value=\"주소검색\" style=\"width: 94px;\">' +
'</div>' +
'<select id=\"rec_sc_type\" name=\"rec_sc_type\" class=\"rec_sc_select\">' +
'<option>경비종류선택</option>' +
'<option value=\"교통비\">교통비</option>' +
'<option value=\"숙박비\">숙박비</option>' +
'<option value=\"식비\">식비</option>' +
'<option value=\"관광비\">관광비</option>' +
'<option value=\"기타\">기타</option>' +
'</select>' +
'<input id=\"rec_sc_cost\" type=\"text\" name=\"rec_sc_cost\" placeholder=\"경비금액 입력해주세요\" value=\"10000\">' +
'
' +
'<textarea style=\"width: 100%; height: 100px; margin-top: 10px;\" name=\"rec_sc_memo\" id=\"rec_sc_memo\" placeholder=\"일정에 대한 Tip!\"></textarea>');</p>
<p> addSection" + scNdayNum + ".append(newScDiv" + scNdayNum + ");
});</p>
<p> scNdayNum++;</p>
<p> addDate.append(newDay);
});</p>
<p>디버깅을 해봤는데 확인 메시지는 뜨는데 일정 공간이 뜨지 않아요 함수 부분을 어떻게 수정해야 오류가 해결될까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
변수 선언시 addSection" + scNdayNum + " 이런식이 아닌
var "addSection "+ scNdayNum 이런 식입니다.
모든 스크립트에 " 안에 + 가 들어가는것이 아닌 바깥쪽입니다.
php 로 따지면 "xxx".$_POST['aaa'] 인것처럼 . 대신 + 를 사용하지요.
쉽게 따지면
var addSection + "scNdayNum" = $('#addSection" + scNdayNum + "');
값이
var addName = "addSection"+scNdayNum;
var "addSection "+scNdayNum = $('#'+addName);
이런 개념? 이라 해야 할까요???참고만 하세요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택