개요

컴포넌트를 조작할 때, 아이템 자체에 있는 텍스트를 가져다 쓸 경우 e.target.innerText를 많이 사용하는데, 이게 크롬과 파이어폭스에서는 잘 기능하는데 사파리만 가면 undefined를 띄우면서 동작하지 않는 문제가 있었다.

터지는 부분이 꼭 innerText같은 부분이라 내 작업물이 동작하지 않는다면 한번쯤 살펴보는게 좋겠다.

첫 번째 사례

스크린샷 2023-11-03 오후 3 14 07

해당 onClick function에서 innerText로 조작한 element가 동작을 안하는 것

그래서 safari에서 콘솔을 한번 찍어보니 …

스크린샷 2023-11-03 오후 3 20 21

이렇게 공백문자가 들어가는 것이었다.

스크린샷 2023-11-03 오후 3 33 53

그래서 textContent로 넣었더니 정상적으로 출력되는 걸 확인

두 번째 사례

스크린샷 2023-11-03 오후 3 43 58

enterName에 따라 json데이터에서 특정 데이터를 꺼내오는 이벤트를 만들었는데, 이것도 첫 번째 사례처럼 enterName에 공백문자가 포함되어 있어서 데이터 출력시 undefine가 뜨는 것이었다.

스크린샷 2023-11-03 오후 3 49 04

이번엔 replace로 공백문자를 제거하는 식으로 만들었다.