[JavaScript] 태그(ex div) 클릭 시 텍스트 값 가져오는 방법

2023-06-09

---

사진: Unsplash 의 Wolfgang Hasselmann

---

1. 방법

 

let textArray = [];

function handleClick(event) {
  let clickedDiv = event.target;
  let textValue = clickedDiv.innerText;

  if (textArray.includes(textValue)) {
    // 이미 클릭된 div인 경우
    textArray = textArray.filter(item => item !== textValue); // 배열에서 해당 텍스트 값 제거
    clickedDiv.style.backgroundColor = ""; // 배경색 원래대로 복구
  } else {
    // 처음 클릭하는 div인 경우
    textArray.push(textValue);
    clickedDiv.style.backgroundColor = "yellow";
  }
}

function otherFunction() {
  console.log(textArray);
}

 

위의 예시에서는 클릭된 div의 텍스트 값을 배열 textArray에서 확인하여 처리합니다. 

클릭된 div의 텍스트 값이 이미 배열에 포함되어 있는 경우에는 해당 텍스트 값을 배열에서 제거하고 배경색을 원래대로 복구합니다.
 클릭된 div의 텍스트 값이 배열에 포함되어 있지 않은 경우에는 해당 텍스트 값을 배열에 추가하고 배경색을 변경합니다.

---

메인 이미지 출처 : 사진: Unsplash의Wolfgang Hasselmann