MelRanG
719
2020-03-10 17:17:50
4
686

jsp와 바닐라자바스크립트 id값 동적할당 질문입니다.



<ul id="TODO">
			<li class="type_colum">TODO</li>
			<c:forEach items="${requestScope.list}" var="item" varStatus="status">
				<c:if test="${item.type eq 'TODO'}">
					<li id = "${item.id}" class = "content" data-id="${item.id}" data-type="${item.type}">${item.title}</li>
					<div>등록날짜: ${item.regDate} <span>${item.name}</span>
						<span>우선순위: ${item.sequence}</span> <input class="ajaxButton"
						type=button value=">"></input></div></li>
				</c:if>
			</c:forEach>
		</ul>

forEach를 통해 li에 id값 item.id를 박았습니다. 그 후 저 id값을 바로 가져오려했는데 방법이 떠오르지 않아 data-id로 동일한 값을 넣었습니다.


id에 dataset.id로 값을 넣어준 후 


function updateTodo(id, type) {
	var target = document.getElementById("id");
	alert("id + type = "+ id + type);
	alert("target" + target);
	document.getElementById("TODO").removeChild(id);
	document.getElementById("DOING").append(id);

이렇게 타입을 수정하는 함수를 만들었는데

updateTodo에 alert으로 조회하면 10이라는 숫자값이 담겨있는데 target은 null이라고 뜹니다...

1. 앞서 선언한 item.li의 id값에도 동일하게 10이라는 값이 박혀있는게 아닌가요?? 박혀있다면 왜 조회가 안될까요??

2. forEach로 동적할당을 한 후 item.id의 값을 가져오는 법을 서치하지 못해서 data-id로 박았는데 jQuery말고 바닐라JS에서 저 id값을 data-id로 처리하지 않고 불러오는 방법이 있을까요??


0
  • 답변 4

  • siva6
    5k
    2020-03-10 17:33:47

    일단 이상한 것 부터...

    var target = document.getElementById("id");

    var target = document.getElementById(id);

    가 되어야 할 것 같습니다.

  • MelRanG
    719
    2020-03-10 17:40:22

    헉.............정말 감사합니다 ㅠㅠ

    1번은 해결됐는데 혹시 data-id말고 item.id를 직접 가지고올 방법이 있을까요..ㅠㅠ 

    찾아보니 대부분 jquery로 해결하더라구요

  • siva6
    5k
    2020-03-10 17:47:52

    직접이 어떤 뜻인지 모르겠네요.
    data-id의 값을 가져오고 싶다면.

    jquery 는 obj.data('id'); 형태일 테구요.
    그냥 쓴다면 obj.datset.id로 접근하면 됩니다.

  • MelRanG
    719
    2020-03-10 17:54:51

    item.id값을 가져오고 싶은데 forEach문 안에 선언된 값이라 어떻게 가져와야 할지 몰라서

    그 대안으로 data-id를 만들고 똑같은 값을 넣었습니다. data값은 앞서 말씀하신 것처럼 dataset을 통해 가져올 수 있는데

    forEach에 선언된 item.id값을 가져올 수 없을까요??

  • 로그인을 하시면 답변을 등록할 수 있습니다.