인생은 파도타기

개요 동적으로 태그에 하위 요소를 넣어야하는 작업이 있었는데, onClick 이벤트로 Object를 전부 넘기고 싶었다. 하지만 onClick 이벤트로 함수를 만들어 넘길 때 Object를 콘솔로 확인해보니 [Object Object] 로 뜨며 정상적인 상태가 아니었다. 해결방법 구글링에선 다양한 방법들이 제시되었지만, 딱히 유효한 방법을 찾지못하다가 생각난게 dataset 이다. onClick=functionName(this) data-value=object 식으로 넘기면 가능할거같았다. 예제코드 const htmlTable = $("#table"); for(...) { htmlTable.append(` `); } 그냥 Object를 넘기면 값이 제대로 넘어가지 않아서 JSON.stringfy로 문자열..

개요 HTML 태그 중 select 태그와 하위 태그인 option을 이용해 리스트를 셀렉하고 그 value를 넘기는 경우가 상당히 많을 것이다. 이때 리스트의 양이 많아 스크롤을 쭉 해야하거나, 한눈에 찾기 어렵다면 유저입장에서 여간 불편한 일이 아닐 수 없다. 이를 해결하기 위해 다양한 방법이 있겠지만, 그 중 HTML5 에서 기본으로 제공하는 태그인 datalist 를 이용해 적용하기로 해보겠다. 하나 두울 세엣 네엣 datalist 란? 태그와 유사한 태그로 로 표기한다. 하위 태그로 을 이용해 셀렉할 수 있고, 검색 혹은 자동완성기능등이 있어 option 태그가 많을 때 찾는 용도로 유용하게 사용이 가능하다. select 태그와 다른점이라면, 검색기능과 input 태그를 주체로 사용한다는 점이다..