[javascript] document.getElementById.value undefined 오류 해결

spring 개인 프로젝트 진행 중에, jsp에 있는 <div> 태그 안의 값을 받아와야 하는데,

계속 console.log로 값을 확인했으나 받아온 값 : undefined 와 같이 표시되었습니다.

jsp의 값은 게시글 상세보기가 잘 되고, print로도 찍히기 때문에 존재하나 javascript에서 넘어오지 않았습니다.

 

오류 : 에러메세지는 뜨지 않으나, document.getElementById("id값").value; 또는 .val; 로 호출 시, 값이 undefined 로 나옴

 

잘못된 예시 : var addr = document.getElementById("goods_addr").val; 또는 .value; (undefined 오류) xxxxxxxxx

var addr = document.getElementById("goods_addr").val; 시 undefined

 

해결 : div는 value값을 호출할 수 없어, 값을 받아오기 위해서는 .innerHTML/ .innerText /.textContent 를 사용해야 한다.

해결 예시 : var addr = document.getElementById("goods_addr").innerHTML;

// 해결 예시(javascript)
// div 태그에서 id="goods_addr"로 선언된 곳의 innerHTML/innerText/textContent로 값을 받아 addr 변수에 저장
var addr = document.getElementById("goods_addr").innerHTML; 

// 자바의 System.out.println(addr) 또는 스프링 log4j객체의 log.info(addr);와 같이, 
// console.log()를 통해 값이 제대로 들어왔는지 확인
console.log("받아온 주소값 : " + addr);

 

화면에서 f12또는 오른쪽 버튼 > 검사를 눌러 개발자 도구에서 console로 값 확인

 

정상적으로 값을 받아와 로그에 찍힌 것을 확인할 수 있습니다.

별 거 아닌 것 같지만, input 태그를 한동안 사용해서 계속 value값을 받아오다 보니..

div태그도 똑같이 value로 선언했다가 값을 받아오지 못하는 undefined 오류를 계속 맞이했었네요.

jsp에서 div태그에 div value=""...로 선언하면 Attribute value is not allowed here가 뜹니다. 

 

오류도 해결하고, 덕분에 지도에 마커를 찍기 위해서 주소값을 불러와야 했는데 성공했습니다! :)