순댓국한그릇
111
2019-03-16 02:18:58 작성 2019-03-16 02:20:32 수정됨
6
274

자바스크립트 클릭 이벤트 질문...


move-button 클래스로 만들어진 버튼에 클릭 이벤트를 연결하였는데 사진에 ㅇ표시된 버튼만 이벤트가 발생하고 나머지는 이벤트가 발생하지 않는 이유좀 가르쳐주세요...ㅠ

<div class="todo-card-group">
	<!--card title -->
	<div class="card-head">
		<span class="card-head-title">Todo</span>
	</div>
	<!-- cards -->
	<c:forEach var="item" items="${list}">
	<c:if test="${item.type eq'TODO'}">
	<div class="card">
		<span class="card-title">${item.title }<br></span>
		<span class="card-info">등록날짜:${fn:substring(item.regdate,0,10) }, ${item.name }, 우선순위${item.sequence }</span>
		<input class="move-button"  type="button"  value="→"/>
	</div>
	</c:if>
	</c:forEach>					
</div>
var e = document.querySelector('.move-button');
	
	e.addEventListener("click",function(){	
		alert('event')		
	},false);


0
0
  • 답변 6

  • 사는게힘듭니다
    1k
    2019-03-16 02:42:08

    반복문이 돌면서 class = "move-button" 을 가진 입력양식이 4개나 나와버리기때문에

    클라스명은 중복되서 하면 안되는걸로알고있긴한데.

    0
  • Kunie
    533
    2019-03-16 02:51:13

    https://www.w3schools.com/jsref/met_document_queryselector.asp


    querySelector() 함수 자체가 선택자의 첫번째것만 가져옵니다

    3
  • Gear
    92
    2019-03-16 10:59:30

    멍앤야옹님 클래스명은 중복돼도 됩니다. 오히려 같은 역할을 하는 요소끼리는 같은 클래스명을 가져야 편합니다. 같은 스타일을 먹인다던지, NodeList를 얻는다던지 할 수 있으니까요

    id가 유니크해야되는겁니다.


    Kunie님 말씀대로 document.querySelector는 요소 하나만 반환합니다.


    document.querySelectorAll 함수로 NodeList를 반환받고 반복문을 통해 해결하거나 이벤트 위임을 통해 해결하면 됩니다.

    1
  • 순댓국한그릇
    111
    2019-03-16 18:34:20 작성 2019-03-16 18:40:58 수정됨

    멍앤야옹 Kunie Gear 

    답변 정말 감사합니다. 덕분에 버튼마다 클릭이벤트 연결은 성공했는데

    버튼클릭 이벤트가 발생했을때 input 태그의 value를 얻어오려고 하는데

    인덱스 부분을 어떻게 해줘야 해당 버튼이 있는 div의 input 태그의 value를 얻어올수 있을까요....?


    <div class="todo-card-group">
    	<!--card title -->
    	<div class="card-head">
    		<span class="card-head-title">Todo</span>
    	</div>
    	<!-- cards -->
    	<c:forEach var="item" items="${list}">
    	<c:if test="${item.type eq'TODO'}">
    	<div class="card">
    		<input name="id" type="hidden" value="${item.id}"/>
    		<input name="type" type="hidden" value="${item.type}"/>					
    		<span class="card-title">${item.title }<br></span>
    		<span class="card-info">등록날짜:${fn:substring(item.regdate,0,10) }, ${item.name }, 우선순위${item.sequence }</span>
    		<input class="move-button"  type="button"  value="→"/>
    	</div>
    	</c:if>
    	</c:forEach>					
    </div>


    var buttons = document.querySelectorAll('.move-button');
    	
    buttons.forEach(function(button){		
    	button.addEventListener('click',test3);
    });
    	
    function test3(){
    	console.log('클릭이벤트 ok');
    	//console.log(this);		
    	var a = document.getElementsByName('id')[0].value;
    	var b = document.getElementsByName('type')[0].value;
    	console.log(a);
    	console.log(b);
    }


    0
  • Gear
    92
    2019-03-16 18:59:26

    순댓국한그릇

    자신의 앞에 있는 id, type 이름을 갖고있는 두 개의 input 요소에서 값을 가져오길 바라시는가보군요.

    이 경우에는 이벤트 위임을 활용하시는게 편해보입니다.

    좀 지저분한 것 같지만, 이벤트 위임을 활용한 예시를 작성해봤습니다.


    document.querySelector('.todo-card-group').addEventListener('click', function(event) {
      var target = event.target;
    
      if (target.classList.contains('move-button') && target.type === 'button') {
        var inputs = target.parentElement.querySelectorAll('input');
    
        console.log(inputs[0].value, inputs[1].value);
      }
    });

    https://jsfiddle.net/648nj01q/

    1
  • 순댓국한그릇
    111
    2019-03-16 22:19:09

     Gear

    눌러진 버튼의 부모노드를 가져와서 그 부모노드의 자식노드를 가져오는식으로 해결하긴 했는데 

    올려주신 코드도 아주 좋은것 같네요~ㅎㅎ

    다음에 꼭 써먹을게요 감사합니다~~

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