我已经创建了一个事件监听器，但它似乎没有调用我的函数。我不确定这是因为元素是在innerHTML中还是什么。我知道事件监听器本身正在监听，因为如果我用console.log替换该函数，我可以让它工作。任何帮助，将不胜感激。
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);
}
}
@Blauharley回答了我的问题。我试图在div上使用addEventListener而不是实际的表单。我改变了我的HTML看起来像这样，它现在正在工作：
<form id="citySearchForm">
<div id="weather"></div>
<p><span id="temp"></span></p>
<p><span id="wind"></span></p>
</form>
嗯，答案是出于某种原因在评论中，但我会详细介绍它。
斜视和Xufox正确地说，你的searchFormFunc()实际上做得很少。它创建了两个新函数，但仅限于searchFormFunc()的范围。这意味着在searchFormFunc()完成之后，它所做的两个功能将丢失到以太。
现在，如果你想在调用searchFormFunc()时触发这些函数，你应该将searchCity和getCityResults变成表达式而不是函数。 I.E.脱掉牙箍和function searchCity()部分。
如果您希望函数存在但尚未调用，请记住您可以将函数存储为函数对象。要做到这一点，将全局变量var a设置为top，使用其余的全局变量，然后当你调用seachFormFunc() set var a = function searchCity(e) {...}时，可以稍后通过调用a()来调用你的函数。