안녕하세요 초보개발자 입니다.
현재 jquery로 시작시간 또는 종료시간이 00:00일때 alert창 발생하게 작성중입니다.
코드는 아래와 같이 작성하였는데 2번째 그리드 부터 00:00에 알랏창이 발생하지않습니다.
1번쨰 그리드만 alert창이 발생하는데 혹시 코드에 문제가 있을까요?
/구분이 교육일 때 시작시간 or 종료시간이 선택 또는 00:00이 될 수 없도록 alert창 추가
$(document).ready(function() {
$('#selBox2, #selBox3, #selBox4, #selBox5, #selBox6, #selBox7, #selBox8, #selBox9, #selBox10').on('change', checkEducationTime);
function checkEducationTime() {
var selBoxValues = Array.from(Array(9), (_, i) => $('#selBox' + (i + 2)).val());
// 교육 시작시간 및 종료시간 ALERT창
if (
(selBoxValues[2] === 'A7' && (selBoxValues[0] === '00:00' || selBoxValues[4] === '00:00' || selBoxValues[7] === '00:00')) ||
(selBoxValues[3] === 'A7' && (selBoxValues[0] === '00:00' || selBoxValues[4] === '00:00' || selBoxValues[7] === '00:00')) ||
(selBoxValues[6] === 'A7' && (selBoxValues[0] === '00:00' || selBoxValues[4] === '00:00' || selBoxValues[7] === '00:00'))
) {
alert('교육 시작시간을 입력해주시길 바랍니다.');
// select 박스 첫 번째 인덱스로 변경
$('#selBox2, #selBox6, #selBox9').prop('selectedIndex', 0);
} else if (
(selBoxValues[2] === 'A7' && selBoxValues[1] === '00:00') ||
(selBoxValues[3] === 'A7' && selBoxValues[5] === '00:00') ||
(selBoxValues[6] === 'A7' && selBoxValues[8] === '00:00')
) {
alert('교육 종료시간을 입력해주시길 바랍니다.');
// select 박스 첫 번째 인덱스로 변경
$('#selBox3, #selBox7, #selBox10').prop('selectedIndex', 0);
}
}
});
많은 관심 부탁드립니다.
감사합니다.
3개의 답변이 있습니다.
1. 그리드 추가시에 onchange 이벤트 한번더 걸어주셨는지 확인해보세요.
ready는 최초 document가 로드된 이후 한번만 실행됩니다. 이후 스크립트로 생성되는 사항은 생성스크립트에 onchange 이벤트 다시 맵핑해주어야 합니다.
2. # 선택자는 ID를 선택할때 사용됩니다.
ID는 중복사용불가합니다. name을 선언하시고 name 선택자로 컨트롤 하세요.
빨간신발님 의견처럼,
checkEducationTime() 함수 안에서
if 문 들어 가기 전에 selBoxValues 배열 값들을 출력해 보면서 비교해 보면서 원인을 찾아 보는게 좋을 것 같네요.
첫번째 그리드가 들어 갈때는 어떤 값이고, 두번째 그리드가 들어 갈때는 어떤 값인지를 alert 문이나 debug문 등을 이용해서 출력해 보면서 비교해 본다면 원인을 찾을 수 있을 걸로 보이네요.
저 상황에서 굳이 === 을 사용해서 비교할 필요가 있을까 하는 생각도 드는데요.
=== 보다는 ==을 사용해서 비교하는게 낫지 않을까 하는 생각도 드네요.
if문 앞단에 console.debug를 사용해서 변경되는 값을 확인해보세요. if문에 들어가는 변수들의 값을 모두 출력해서 원하는대로 변하고 있는지 확인하시면 됩니다.
크롬에서 f12를 눌러 개발자모드에서 확인이 가능합니다.