addEventListener가 내 함수를 호출하지 않습니다.

이벤트 리스너를 만들었지 만 내 기능을 호출하지 않습니다. 요소가 innerHTML에 있거나 무엇 때문에 있는지 확실하지 않습니다. console.log로 함수를 대체하면 작동하도록 이벤트 리스너가 듣고 있다는 것을 알 수 있습니다. 어떤 도움을 주시면 감사하겠습니다.addEventListener가 내 함수를 호출하지 않습니다.

html 코드 :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Weather App</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
     <!--********************* Project **************************--> 
     <form> 
      <div id="citySearchForm"></div> 
      <div id="weather"></div> 
      <p><span id="temp"></span></p> 
      <p><span id="wind"></span></p> 
     </form> 
     <!--******************* Script Files **********************--> 
     <script src="./main.js"></script> 
    </body> 
</html>

내 JS 코드 :

var defaultDiv = true; 
var cityName; 
var citySearch = document.getElementById('citySearchForm'); 
if(defaultDiv === true) { 
    citySearch.innerHTML += '<p>Choose a city:</p>'+ 
    '<input type="text" placeholder="Enter a city" id="getCitiesInput"></input>'+ 
    '<button type="submit">Search</button>'; 
} else { 
    citySearch.innerHTML += '<p>Select the correct city:</p>'+ 
    '<select id="resultOptions">'+ 
    '<option value='+ "" + '></option>'+ 
    '</select>'+ 
    '<button type="submit">See Results</button>'; 
}; 
console.log(cityName); 
citySearch.addEventListener("submit", searchFormFunc); 

function searchFormFunc(e) { 
    console.log('working'); 
    if(defaultDiv === true) { 
     console.log('fired 1'); 
     cityName = document.getElementById('getCitiesInput').value; 
     console.log(cityName); 
     defaultDiv = false; 
    } else { 
     console.log('fired 2'); 
     selectedCity = document.getElementById('resultOptions').value; 
     console.log(selectedCity); 
    } 
}

출처

2017-01-30 Lonnie McGill

핸들러 내부에서 함수를 정의했지만 호출하지 않았습니다. 당신이 기능을 전혀 원하지 않는 것처럼 보입니다. 그냥'function searchCity (e) {'와'function getCityResults (e) {'와 그 닫는 중괄호를 제거하십시오. –

'searchFormFunc'는 어떻게해야하나요? 지금은 호출되지 않는 두 가지 함수를 생성하고, 두 개의 로그 메시지를 작성하고 종료하며, 두 함수에 대한 모든 참조를 잃어 버려 액세스 할 수 없게 만듭니다. – Xufox

잘못된 HTML이 있음을 유의하십시오. 'options' 태그는 닫는 중괄호가 없기 때문에'option'을 의미했는지 확신 할 수 있습니다. –

글쎄, 대답은 어떤 이유로 코멘트에,하지만 난거야하지만 몇 가지 세부 사항.

squint와 Xufox가 올바르게 말한 것처럼 searchFormFunc()은 실제로 거의 효과가 없습니다. 두 가지 새로운 기능을 만들지 만 범위는 searchFormFunc()입니다. 즉, searchFormFunc()이 끝나면 만든 두 함수가 에테르에 손실됩니다.

searchFormFunc()을 호출 할 때 해당 기능을 실행하려면 searchCity과 getCityResults을 함수 대신 표현식으로 사용해야합니다. I.E. 중괄호를 벗고 function searchCity() 부분.

함수를 존재하지만 아직 호출하지 않으려면 함수를 함수 개체로 저장할 수 있습니다. 이렇게하려면 나머지 글로벌과 함께 전역 변수 var a을 위로 설정 한 다음 seachFormFunc() 세트를 var a = function searchCity(e) {...}으로 설정하면 나중에 a()으로 전화하여 기능을 호출 할 수 있습니다.

출처

2017-01-30 21:13:59 EvSunWoodard

@Blauharley가 내 질문에 대답했습니다. addEventListener를 실제 폼이 아닌 div에 사용하려고했습니다. html이 이렇게 보이도록 변경했습니다. 이제는 작동 중입니다.

<form id="citySearchForm"> 

     <div id="weather"></div> 

     <p><span id="temp"></span></p> 

     <p><span id="wind"></span></p> 

    </form>

출처

2017-01-30 21:34:32

addEventListener가 내 함수를 호출하지 않습니다.

답변

관련 문제