Javascript addEventListener未调用我的函数_Javascript_Addeventlistener_Dom Events

Javascript addEventListener未调用我的函数

javascript

Javascript addEventListener未调用我的函数,javascript,addeventlistener,dom-events,Javascript,Addeventlistener,Dom Events,我创建了一个事件侦听器，但是，它似乎没有调用我的函数。我不确定这是否是因为元素在innerHTML中还是什么。我知道事件侦听器本身正在侦听，因为如果我用console.log替换函数，我可以让它工作。任何帮助都将不胜感激 html代码： <!DOCTYPE html> <html lang="en"> <head> <title>Weather App</title> <meta chars

我创建了一个事件侦听器，但是，它似乎没有调用我的函数。我不确定这是否是因为元素在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);
     }
}

var defaultDiv=true；
var cityName；
var citySearch=document.getElementById（'citySearchForm'）；
if（defaultDiv==true）{
citySearch.innerHTML+='选择一个城市：'+
''+
“搜索”；
}否则{
citySearch.innerHTML+='选择正确的城市：'+
''+ 
''+
''+
"见成果";；
};
console.log（cityName）；
citySearch.addEventListener（“提交”，searchFormFunc）；
函数searchFormFunc（e）{
console.log（'working'）；
if（defaultDiv==true）{
console.log（'fired 1'）；
cityName=document.getElementById（'getCitiesInput'）。值；
console.log（cityName）；
defaultDiv=false；
}否则{
console.log（'fired 2'）；
selectedCity=document.getElementById（'resultOptions'）。值；
console.log（selectedCity）；
}
}

好吧，答案出于某种原因出现在评论中，但我将只介绍一些细节

正如Skint和Xufox正确地说的那样，您的

searchFormFunc（）

实际上做得很少。它创建了两个新函数，但仅在

searchFormFunc（）的范围内。这意味着在searchFormFunc（）
完成后，它生成的两个函数将丢失给以太
现在，如果您想在调用searchFormFunc（）
时启动这些函数，您应该将searchCity
和getCityResults
转换为表达式而不是函数。即，取下支架和函数searchCity（）
零件
如果希望函数存在，但尚未被调用，请记住可以将函数存储为函数对象。为此，将一个全局变量var a
与其余的全局变量一起设置在顶部，然后当您调用seachFormFunc（）
setvar a=function searchCity（e）{…}
时，您可以稍后通过调用a（）

    <form id="citySearchForm">

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

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

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

    </form>




您在处理程序中定义了函数，但没有调用它们。看起来你根本不想要这些功能。只需删除函数searchCity（e）{
和函数getCityResults（e）{
和它们的右括号。searchFormFunc
应该做什么？现在它创建了两个从未被调用的函数，生成了两条日志消息和退出，丢失了对这两个函数的所有引用，使它们无法访问。还要注意，您有一些无效的HTML。选项
标记没有右括号，我是pret你的意思是选项
。谢谢你的提醒。我会删除这些。我只是想让searchFormFunc暂时工作。请修复代码中的语法问题。突出显示应该可以清楚地显示问题所在。