addEventListener 没有调用我的函数答案

【问题标题】：addEventListener not calling my functionaddEventListener 没有调用我的函数
【发布时间】：2017-01-30 21:02:01
【问题描述】：

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

【问题讨论】：

您在处理程序中定义了函数，但您没有调用它们。好像你根本不想要这些功能。只需删除 function searchCity(e){ 和 function getCityResults(e){ 及其右大括号即可。
searchFormFunc 应该做什么？现在它创建了两个永远不会被调用的函数，生成两条日志消息并退出，丢失对这两个函数的所有引用，使它们无法访问。
另请注意，您有一些无效的 HTML。 options 标签没有右括号，我很确定你的意思是 option。
感谢您的提醒。我会删除那些。我只是想让 searchFormFunc 现在工作。
请修复代码中的语法问题。突出显示应该很清楚问题出在哪里。

标签： javascript addeventlistener dom-events

【解决方案1】：

@Blauharley 回答了我的问题。我试图在 div 上使用 addEventListener 而不是实际的表单。我将我的 html 更改为如下所示，它现在可以工作了：

    <form id="citySearchForm">

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

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

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

    </form>

【讨论】：

【解决方案2】：

嗯，出于某种原因，答案在 cmets 中，但我将提供一些细节。

正如 squint 和 Xufox 所说的那样，你的 searchFormFunc() 实际上做的很少。它创建了两个新函数，但仅限于searchFormFunc() 的范围内。这意味着在searchFormFunc() 完成后，它所创建的两个函数将丢失给以太。

现在，如果您想在调用 searchFormFunc() 时触发这些函数，您应该将 searchCity 和 getCityResults 变成表达式而不是函数。 IE。取下大括号和function searchCity() 部分。

如果您希望函数存在但不被调用，请记住您可以将函数存储为函数对象。为此，请在顶部设置一个全局变量 var a，以及其余的全局变量，然后在您调用 seachFormFunc() 时设置 var a = function searchCity(e) {...}，然后您可以稍后通过调用 a() 来调用您的函数。

【讨论】：