我已经创建了一个事件监听器，但是，它似乎没有调用我的函数。我不确定是否是因为该元素位于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>
关于javascript - addEventListener 没有调用我的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41945349/