Question

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

Answer 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>

Answer 2

嗯，答案是出于某些原因在评论中，但我会对其进行一些细节处理。

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

现在，如果您想在拨打searchFormFunc()时触发这些功能，则应将searchCity和getCityResults设为表达式而不是函数。 I.E.脱掉牙箍和function searchCity()部分。

如果您希望函数存在但尚未调用，请记住您可以将函数存储为函数对象。要执行此操作，请将全局变量var a设置为顶部，其余的全局变量，然后当您调用seachFormFunc()集var a = function searchCity(e) {...}时，您可以稍后通过调用{来调用您的函数{1}}。

addEventListener没有调用我的函数

2 个答案: