자바스크립트 함수가 작동이 잘 안 됩니다.
본문
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<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="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<link rel="stylesheet" href="../resources/rec_write4.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href=" https://fonts.googleapis.com/icon?family=Material+Icons ">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<title>여행기록write</title>
</head>
<body>
<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="강릉여행"><br>
<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">
<br>
<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">
<br>
<textarea style='width: 100%; height: 100px; margin-top: 10px;' name='rec_sc_memo' id='rec_sc_memo' placeholder='일정에 대한 Tip!'></textarea>
`;
scNum++;
addSection.appendChild(newScDiv);
});
//-----------------------------------------------------------------------------
// 일차 및 사진 추가 버튼
$("#addDateBtn").click(function addNewDay() {
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">
<br>
<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 + "');
// 일정 전체 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\">' +
'<br>' +
'<textarea style=\"width: 100%; height: 100px; margin-top: 10px;\" name=\"rec_sc_memo\" id=\"rec_sc_memo\" placeholder=\"일정에 대한 Tip!\"></textarea>');
addSection" + scNdayNum + ".append(newScDiv" + scNdayNum + ");
});
scNdayNum++;
addDate.append(newDay);
});
</script>
<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>
에서 버튼을 누르면 일정 공간이 떠야 하는데
$("#scAddDayNumBtn").click(function addScInput2() {
alert("확인!");
var addSection" + scNdayNum + " = $('#addSection" + scNdayNum + "');
// 일정 전체 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\">' +
'<br>' +
'<textarea style=\"width: 100%; height: 100px; margin-top: 10px;\" name=\"rec_sc_memo\" id=\"rec_sc_memo\" placeholder=\"일정에 대한 Tip!\"></textarea>');
addSection" + scNdayNum + ".append(newScDiv" + scNdayNum + ");
});
scNdayNum++;
addDate.append(newDay);
});
디버깅을 해봤는데 확인 메시지는 뜨는데 일정 공간이 뜨지 않아요 함수 부분을 어떻게 수정해야 오류가 해결될까요?
답변 2
변수 선언시 addSection" + scNdayNum + " 이런식이 아닌
var "addSection "+ scNdayNum 이런 식입니다.
모든 스크립트에 " 안에 + 가 들어가는것이 아닌 바깥쪽입니다.
php 로 따지면 "xxx".$_POST['aaa'] 인것처럼 . 대신 + 를 사용하지요.
쉽게 따지면
var addSection + "scNdayNum" = $('#addSection" + scNdayNum + "');
값이
var addName = "addSection"+scNdayNum;
var "addSection "+scNdayNum = $('#'+addName);
이런 개념? 이라 해야 할까요???참고만 하세요
전체적으로 봤을땐 오타 문제 가 있어 보입니다. 확인 확인 요
답변을 작성하시기 전에 로그인 해주세요.
