MDN은 addEventListener() 메소드를 지정된 이벤트가 대상에 전달될 때마다 호출되는 함수로 설명합니다. 코드가 작동하려면 타겟에 접근해야 합니다.
일반적인 대상은 Element, Document, Window 및 이벤트를 지원하는 모든 개체(예:XMLHttpRequest)입니다. 이 글에서는 특정 이벤트의 대상으로 할당할 수 있도록 요소에 액세스하려고 합니다.
대시가 포함된 특정 요소 ID, 클래스 또는 이름이 있는 노드에 이벤트 리스너를 추가하려고 하면 JavaScript에서 오류가 발생합니다. JavaScript는 대시( – )를 좋아하지 않으며 마이너스로 이해합니다. 이 문서에서는 요소 이름의 대시( – )로 인해 발생하는 JavaScript 오류를 해결하는 두 가지 솔루션을 제공합니다.
해결됨:대시로 인한 JavaScript 오류를 해결하는 방법
JavaScript가 대시를 마이너스로 인식하지 못하도록 하려면 문자열을 사용하는 노드를 선택하는 다른 방법을 사용하세요.
querySelector() 사용
JavaScript에서 querySelector()는 대시를 포함할 수 있는 문자열을 사용합니다. 문자열화는 JavaScript가 대시를 마이너스로 인식하지 못하도록 합니다. MDN에 따르면 Document 메소드 querySelector()는 지정된 선택기 또는 선택기 그룹과 일치하는 문서 내 첫 번째 요소를 반환합니다. 일치하는 항목이 없으면 null이 반환됩니다.
ID 선택기를 사용하여 특정 ID를 가진 요소를 선택할 수 있습니다. `e.target.new-task-description` 대신 `e.target.querySelector('#new-task-description')`을 사용하세요.
클래스 선택기를 사용하여 클래스가 있는 요소를 선택할 수도 있습니다. `e.target.querySelector('.new-task-description')`.
노드 이름 바꾸기
권장되지 않지만 작동하는 해킹 솔루션이 있습니다. ID 또는 클래스 이름의 대시를 밑줄로 바꿔 노드 이름을 바꾸거나 노드에 대한 모든 참조에서 대시를 제거하면 됩니다. `e.target.new_task_description.value` 및 `e.target.newtaskdescription.value`.
두 가지 솔루션 중 하나를 사용하면 JavaScript 오류가 해결됩니다. 그러나 querySelector를 사용하는 것이 더 우아하므로 선호되는 솔루션입니다.
변수 생성
제가 조사한 또 다른 솔루션은 taskInput이라는 변수를 생성하고 해당 변수에 노드를 할당한 다음 taskInput 변수를 대상에 연결하는 것이었습니다. newTextInput =document.getElementById(“new-task-description”) 그러나 DOM에서 테스트했을 때 JavaScript가 예상대로 작동하지 않았습니다.
다른 시도 방법
예를 들어 getElementByID() 메서드를 연결하려고 시도했을 때 e.target.getElementByID('new-task-description'), JavaScript에서 오류가 발생했습니다. 아마도 제가 만들었지만 파악하지 못한 구문 오류가 있었을 것입니다.
구문 오류가 발생하지 않았다면 이론적으로 getElementByClassName() 메서드 연결도 작동하지 않는다는 의미입니다.
제가 시도하지 않은 다른 방법이 있지만 요소에 따라 확인해 보시기 바랍니다.
document.getElementsByTagName() 메소드를 사용하면 다음과 같이 특정 HTML 태그의 모든 요소를 선택할 수 있습니다.
getElementsByTagName('li')
그리고 document.getElementsByName() 메서드를 사용하면 다음과 같이 특정 이름 속성을 가진 모든 요소를 선택할 수 있습니다.
getElementsByName('새 작업')
테스트 및 학습
저는 Flatiron School 소프트웨어 엔지니어링 플렉스 프로그램에 등록했으며 여러 실험실에서 작업해 왔습니다. JavaScript가 나에게 오류를 발생시키는 이유를 식별하는 데 도움이 되는 기사를 찾을 수 없었기 때문에 이 글을 쓰게 되었습니다.
고맙게도 Flatiron School에는 JavaScript가 대시를 마이너스로 해석하여 오류가 발생했음을 식별하는 데 도움을 준 기술 코치가 있습니다. 내 구문이 정확했기 때문에 그들의 도움 없이는 결코 짐작할 수 없었을 것입니다. 기술 코치의 도움을 받을 수 없는 JavaScript를 배우는 다른 사람들에게 이 기사가 도움이 되기를 바랍니다. 즐거운 코딩 되세요!