catch TypeError: Cannot read properties of undefined 해결하기

catch TypeError: Cannot read properties of undefined (reading 'secondPlaceNm') at fn_addPlace2 (PcCodeManagement.do:139:22) at HTMLDivElement.onclick (PcCodeManagement.do:1077:89)

 

위와같은 에러가 발생했다.

 

 

문제 코드

function fn_addPlace2(firstPlace,firstPlaceId){
		document.pcPlaceVO.secondPlaceNm.value="";
		var addPlace1 = document.getElementById("departmentAddTab1");
		var addPlace2 = document.getElementById("departmentAddTab2");
		var addPlace3 = document.getElementById("departmentAddTab3");
		addPlace1.style.display="none";
		addPlace2.style.display="block";
		addPlace3.style.display="none";
		
		var save = document.getElementById("secondPlaceSave");
		var update = document.getElementById("secondPlaceUpdate");
		var deleteBtn = document.getElementById("secondPlaceDelete");
		save.style.display="block";
		update.style.display="none";
		deleteBtn.style.display="none";
		
		document.pcPlaceVO.firstPlaceSelect.value = firstPlace;
		document.pcPlaceVO.firstPlaceId.value = firstPlaceId;
	}

문제가 되는 부분은 여기였다. 아무래도 secondPlaceNm이 없어서 발생한 문제인것 같았다.

아래처럼 바꿔주니 해결되었다.

 

해결코드

	function fn_addPlace2(firstPlace, firstPlaceId) {
	    var addPlace1 = document.getElementById("departmentAddTab1");
	    var addPlace2 = document.getElementById("departmentAddTab2");
	    var addPlace3 = document.getElementById("departmentAddTab3");
	    addPlace1.style.display = "none";
	    addPlace2.style.display = "block";
	    addPlace3.style.display = "none";

	    var save = document.getElementById("secondPlaceSave");
	    var update = document.getElementById("secondPlaceUpdate");
	    var deleteBtn = document.getElementById("secondPlaceDelete");
	    save.style.display = "block";
	    update.style.display = "none";
	    deleteBtn.style.display = "none";


	    var firstPlaceSelect = document.getElementById("firstPlace");
	    firstPlaceSelect.value = firstPlace;
	    var firstPlaceIdInput = document.getElementById("firstPlaceId");
	    firstPlaceIdInput.value = firstPlaceId;
	}

또 document.~으로시작되는 부분은 익스플로워에서는 문제가 없었지만 edge에서 문제 발생했다.

var값을 넣어주고 문제 해결!

 

또 데이터 베이스에 저장될때 두번째장소를 저장시 첫번째 장소의 이름과 ID를 가지고 와야하는데 저장이 안됬다. 역시 edge에서 안되는 문제..

 

문제코드

	function fn_secondPlace_save() {	
		frm = document.getElementById("pcPlaceVO");
		var firstPlaceSelect = frm.firstPlaceSelect.value;
		var secondPlaceNm = $.trim(frm.secondPlaceNm.value);
		if (secondPlaceNm == ""){
			alert("부서명을 입력해주세요.");
			return;
		}
		if(confirm("등록하시겠습니까?")){
			frm.firstPlace.value= firstPlaceSelect;
			frm.secondPlace.value = secondPlaceNm;
		  	frm.action = "<c:url value="/addSecondPlace.do"/>";
		    frm.submit();
		}
		return true;
	}

위와 같은 코드를 아래와같이 수정하여 오류해결!

 

해결코드

	function fn_secondPlace_save() {	
		frm = document.getElementById("pcPlaceVO");
		var firstPlaceSelect = frm.firstPlace.value;
		var secondPlaceNm = $.trim(frm.secondPlaceNm.value);
		if (secondPlaceNm == ""){
			alert("부서명을 입력해주세요.");
			return;
		}
		if(confirm("등록하시겠습니까?")){
			frm.firstPlaceSelect.value= firstPlaceSelect;
			frm.secondPlace.value = secondPlaceNm;
		  	frm.action = "<c:url value="/addSecondPlace.do"/>";
		    frm.submit();
		}
		return true;
	}

 

호환문제가 계속 뜰것 같은데 잘 정리해두고 사용하자