자바스크립트 함수가 작동이 잘 안 됩니다. 채택완료
Copy
여행기록write
여행제목
한줄평
썸네일 사진
해시태그1
해시태그2
해시태그3
해시태그4
일정 :
일차
사진
일정 1
경비종류선택
교통비
숙박비
식비
관광비
기타
등록
취소
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 = `
일정`
+scNum+
`
경비종류선택
교통비
숙박비
식비
관광비
기타
`;
scNum++;
addSection.appendChild(newScDiv);
});
//-----------------------------------------------------------------------------
// 일차 및 사진 추가 버튼
$("#addDateBtn").click(function addNewDay() {
var addDate = document.getElementById("addDate");
var newDay = document.createElement("div");
newDay.className = "recwrite_nday";
newDay.innerHTML = `
일차
사진
일정 1
경비종류선택
교통비
숙박비
식비
관광비
기타
// n일차 일정 추가--------------------------------------------------------------------------------
$("#scAddDayNumBtn").click(function addScInput2() {
alert("확인!");
var addSection" + scNdayNum + " = $('#addSection" + scNdayNum + "');
// 일정 전체 Div
var newScDiv" + scNdayNum + " = $('').addClass('rec-sec').css('background-color', 'gray');
newScDiv" + scNdayNum + ".html('일정 ' + scNum + '' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'경비종류선택' +
'교통비' +
'숙박비' +
'식비' +
'관광비' +
'기타' +
'' +
'' +
'
' +
'');
addSection" + scNdayNum + ".append(newScDiv" + scNdayNum + ");
});
scNdayNum++;
addDate.append(newDay);
});
// 이미지 미리보기 함수 => 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); [이미지 제대로 나온거 보고 주석처리함]
// 선택자, attr("속성명", "값") =>
$('#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("이미지없음");
}
})
})
// 여행날짜 계산함수
$(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('');
});
});
에서 버튼을 누르면 일정 공간이 떠야 하는데
Copy
$("#scAddDayNumBtn").click(function addScInput2() {
alert("확인!");
var addSection" + scNdayNum + " = $('#addSection" + scNdayNum + "');
// 일정 전체 Div
var newScDiv" + scNdayNum + " = $('').addClass('rec-sec').css('background-color', 'gray');
newScDiv" + scNdayNum + ".html('일정 ' + scNum + '' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'경비종류선택' +
'교통비' +
'숙박비' +
'식비' +
'관광비' +
'기타' +
'' +
'' +
'
' +
'');
addSection" + scNdayNum + ".append(newScDiv" + scNdayNum + ");
});
scNdayNum++;
addDate.append(newDay);
});
디버깅을 해봤는데 확인 메시지는 뜨는데 일정 공간이 뜨지 않아요 함수 부분을 어떻게 수정해야 오류가 해결될까요?
답변 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);
이런 개념? 이라 해야 할까요???참고만 하세요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인