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 입니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
댓글 입력