자바스크립트 함수가 작동이 잘 안 됩니다.

자바스크립트 함수가 작동이 잘 안 됩니다.

QA

자바스크립트 함수가 작동이 잘 안 됩니다.

본문


<%@ 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);

이런 개념? 이라 해야 할까요???참고만 하세요

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT