Search

th:each 와 버튼

태그
JavaScript

th:each 와 버튼

다음과 같이 화면을 구상하였는데, th:each 로 인해 생성된 버튼에 연결된 함수가 첫번째 버튼에서만 동작하고 나머지 버튼에서는 동작하지 않았습니다.
즉, 정상적이라면 th:each 로 생성된 제목2 아래의 점선 버튼을 클릭하더라도 Add Card 모달이 떠야합니다. 하지만 슬프게도 뜨지 않았습니다…

해결방안

여러가지 경우를 검색해보다가 다음과 같은 글을 발견했습니다. 그리고 내용을 약간 수정해보았습니다.

원래 코드

thymeleaf

javascript

수정코드

thymeleaf

onclick 을 th:onclick 으로 바꿔주었고, 함수에 변수를 넣었을 때 잘 동작이 되는지 확인하기 위하여 th:each 에서 todolist 로 받아온 객체를 넘겨주었습니다.

javascript

모달창을 띄우는것이 중요했기 때문에 코드를 다음과 같이 수정해주었습니다.
그리고 콘솔에 값이 잘 찍히는지 확인해보았습니다.
버튼을 클릭하면 값이 잘 출력되는것을 확인하였고, 모달창도 잘 떴습니다!(감격 )