자바스크립트 getElementById(id) 에서 id를 변수로 받는 방법 질문입니다.

Question

안녕하세요.getElementById(id)에서 id를 변수로 받고 싶은데 , 구글검색해서 나온 방법으로는 eval() 이 있더라구요.사용해보니까 null값이 나와서 혹시 다른 방법이 있는지 질문드립니다.

초코쪼꼬 · Accepted Answer

질문자분.. listener에서 var id &#61; &#34;test&#34; &#43; a;alert(id); 찍어보세요 test1로 나올거 같네요. 전역변수에서 seq 처리를 하니 0찍으려는 순간에 1이 나오고 1찍으려는순간에 2가 나올거 같아요.

basscraft · Answer

getElementById에 들어가는 dom element의 id 자체가 text 아닌가요?

초코쪼꼬 · Answer

한발 늦었네요 ㅎㅎ id에 넣을 값이 string 인데 양쪽끝에 quote를 붙일 이유가 없겠죠? 게다가 eval까지..

마크쓰리 · Answer

basscraft처음에 적어주신 방법대로 했었는데 null 이었습니다.id는 test0 ~ testn 잘 늘어나는데 document.getElementById의 인자로 들어가면 null 이네요..

마크쓰리 · Answer

수송대원 '-'ㆀid는 test0 ~ testn 잘 늘어나는데 document.getElementById의 인자로 들어가면 null 이라서 혹시 다른 방법이 있는가 싶어서 질문했습니다.

basscraft · Answer

마크쓰리그럼 그 시점에서 test0 엘리먼트가 없다는 말 아닐까요? 없으면 undefined 가 나오나? 아무튼 id는 text로 하시는게 맞습니다. 메서드의 이름이 get Element By Id 임을 생각해 보시면....

초코쪼꼬 · Answer

null 이라는건 해당 selector가 없다는건데.. test0 test1 로 나오고 싶다는건 &#34;test0&#34;, &#34;test1&#34; 이걸말하는건가요?

마크쓰리 · Answer

basscraft말씀대로 확인해보니까 없는 id를 넣어도 null 이 나오네요.그 시점에서 없다는게 맞는거 같습니다.근데 var id를 alert로 출력해보면 정상출력되는데 getelementbyid로 들어가면 왜 없어진다는 걸까요??

초코쪼꼬 · Answer

&#64;마크쓰리 질문자분은.. 변수값과.. element의 개념을 다시한번 찾아보는게 좋을거 같네요. var id는 변수일뿐이고, document.getElementById(&#34;id&#34;); 는 해당 element의 정보를 object식으로 리턴받는 document객체의 method입니다.

마크쓰리 · Answer

수송대원 '-'ㆀ존재하는 id를 넣으면 [object HTMLInputElement] 라고 출력되는데요, 얘를 이용해서 해당 id의 속성값을 가져오려고 하는 중입니다.근데 test0,test1 이라는 엘리먼트가 없다는건....

basscraft · Answer

스톡오버플로우에 검색해 보니 좋은 글이 있네요 https://stackoverflow.com/questions/8739605/getelementbyid-returns-null Invalid HTML syntax (some tag is not closed or similar error) : 잘못된 html 문법Duplicate IDs - there are two HTML DOM elements with the same ID : ID 중복Maybe element you are trying to get by ID is created dynamically (loaded by ajax or created by script)? : 동적으로 생성되는 엘리먼트

초코쪼꼬 · Answer

&#64;마크쓰리 질문자분.. 좀 말좀 정리좀 하는게 좋겠어요. 여기서 존재하는 id라는건 무엇이며 얘를 이용한다의 얘는 무엇이고를 정리해주세요. 본인이 하는말은.. 본인만 알고 있는겁니다. 커뮤니케이션할때는 대상이 명확해야하죠.

마크쓰리 · Answer

수송대원 '-'ㆀ댓글 남기는 중에 글 남겨주셨네요.첫 질문글에 자세히 올리지 않았지만 test0, test1 이라는 element를 계속 생성중에 있습니다.그때 뒤에 a&#43;&#43; 를 해주면서 test0, test1로 증가하고 있구요.생성한 test0, test1를 getelementbyid 에 박아넣으면 그 값은 출력되는데, 동적으로 넣어주고 싶어서 찾아보게 되었습니다..

초코쪼꼬 · Answer

&#64;마크쓰리 1. 첫 질문글에 자세히 올리지 않았지만 test0, test1 이라는 element를 계속 생성중에 있습니다.2. 그때 뒤에 a&#43;&#43; 를 해주면서 test0, test1로 증가하고 있구요. 자 그러면 1,2 번내용이 끝난 시점에 debugger;를 적어놓고 개발자 도구에 debug탭을 들어갑니다. 생성을했다는 element가 정상적으로 html - body 쪽에 생성이 되어서 들어있는지를 확인해보세요.

마크쓰리 · Answer

basscraft 감사합니다. 참조해보겠습니다.수송대원 '-'ㆀ네. rect#test0 확인했구요getElementById(&#34;test0&#34;) 이런식으로 넣으면 정상출력되는데, getelementbyid(test&#43;a) 라는 식으로 넣어서 출력하고자 하는게 의도입니다.

초코쪼꼬 · Answer

@ 마크쓰리 element 생성시점과 document.getElementById("id") 출력시점이 어긋난거 같네요. 테스트시 전혀 문제되지 않는 코드입니다.var a = 0; var id = "test" + a;document.getElementById("test0");document.getElementById(id); 둘다 동일값이 나오는게 맞습니다. -- 추가

마크쓰리 · Answer

수송대원 '-'ㆀ네 dgtest값 나오고 dg는 null입니다.dgtest는 [object SVGRectElement] 출력확인되었습니다.

초코쪼꼬 · Answer

추측으로는 감이 안잡히네요. 해당 부분 소스를 좀더 볼 수 있으면 좋겠어요.

마크쓰리 · Answer

수송대원 '-'ㆀ처음부터 소스 올렸어야 하는데 죄송합니다..var a &#61; 0; var el &#61; document.getElementById(&#34;start&#34;); function listener(){ makeRect(); var id &#61; &#34;test&#34; &#43; a; var dgtest &#61; document.getElementById(&#34;test0&#34;); var dg &#61; document.getElementById(id); alert(dgtest); alert(dg); } el.addEventListener(&#34;click&#34;,listener); .... function makeRect(){ var elem &#61; document.createElementNS(xmlns,&#34;rect&#34;); elem.id &#61; &#34;test&#34; &#43; a; a &#43;&#61; 1; elem.setAttributeNS(null,&#34;x&#34;,randomX(10,(boxWidth-r1))); elem.setAttributeNS(null,&#34;y&#34;,30); elem.setAttributeNS(null,&#34;width&#34;,r1); elem.setAttributeNS(null,&#34;height&#34;,r2); elem.setAttributeNS(null,&#34;fill&#34;,randomColor()); return svgElement.appendChild(elem); }

마크쓰리 · Answer

수송대원 '-'ㆀ아이고..이런 바보같은 실수를 해버렸네요. 마무리를 어떻게 지어야 할지..답답하셨을거 같은데 좋은 답변 정말 감사합니다.listener에서 증가시켜주는걸로 바꾸니 정상출력됩니다...도움 정말 정말 감사합니다..

자바스크립트 getElementById(id) 에서 id를 변수로 받는 방법 질문입니다.

20개의 답변

#getelementbyid 목록