getElementById와getElementByClassname 질문입니다.

조회수 705회
let removeToast;

const result = document.getElementById("result");
const toast = document.getElementById("toast");
function handleOnclick1() {

    toast.classList.contains("reveal") ?
        (clearTimeout(removeToast), removeToast = setTimeout(function () {
            document.getElementById("toast").classList.remove("reveal")
        }, 1000)) :
        removeToast = setTimeout(function () {
            document.getElementById("toast").classList.remove("reveal")
        }, 1500)
    toast.classList.add("reveal")

``}
result.addEventListener("click", handleOnclick1);

위 내용은 실행이 되는 JS입니다. 검색결과 중 하나를 클릭 시 리스트에 추가가 되었다는 알림(토스트) 기능을 구현하고 있습니다.

클릭하는 div의 id로 주었을 땐 실행이 되지만, 검색 결과가 여러개일 때가 있으므로 id가 아닌 class명으로 바꾸고 싶었습니다.


let removeToast;

const result = document.getElementsByClassName("result");
const toast = document.getElementById("toast");
function handleOnclick1() {

    toast.classList.contains("reveal") ?
        (clearTimeout(removeToast), removeToast = setTimeout(function () {
            document.getElementById("toast").classList.remove("reveal")
        }, 1000)) :
        removeToast = setTimeout(function () {
            document.getElementById("toast").classList.remove("reveal")
        }, 1500)
    toast.classList.add("reveal")

}
result.addEventListener("click", handleOnclick1);

class를 불러오도록 변경한 JS입니다. 발생하는 오류는 :Uncaught TypeError: result.addEventListener is not a function 입니다.

  • (•́ ✖ •̀)
    알 수 없는 사용자
  • classname 으로 element를 찾으면 배열형태로 return되기때문에 [?] 로 지정해주셔야합니다 김호원 2021.10.18 17:01

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)