事件侦听器代码不会按预期执行功能答案

【问题标题】：Event listener code won't execute function as expected事件侦听器代码不会按预期执行功能
【发布时间】：2015-06-02 17:23:39
【问题描述】：

我正在尝试编写一个小的 javascript 函数，它从 OpenSignal 获取数据，然后将其显示在 html 表中。

这一直很好，直到我尝试通过添加一个 html 表单来接受邮政编码输入来使其用户友好。我试图避免使用 PHP 来执行此操作，因为我的客户端不会安装它。

我正在向提交按钮添加一个事件侦听器，以检测何时提交表单数据。然后我接受这个并验证字符串是否包含有效的邮政编码。如果它们无效，程序会发出一条警报，上面写着“抱歉，您似乎输入了错误的邮政编码。”。

如果没有，那么我将获取邮政编码并将它们传递到我的函数 processPostcodesOnServer() 中。问题是这在事件侦听器中不起作用。当我使用javascript数组手动传递邮政编码并在事件侦听器之外调用函数时，一切正常。当我将它放在事件侦听器中时，它根本不起作用。我已经检查了该函数的所有输入是否正确，并且已经多次遍历整个程序，但无法找出导致问题的原因。在我看来，这只是 Javascripts 随机行为的另一种情况。

谁能帮忙？？这是我的 HTML 和 Javascript 文件（我正在使用一些 JQuery，所以如果你想运行它，你必须链接到最新版本）。

<!DOCTYPE html>
<html>
<head>
<title>Mobile Signals</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="NetworkStats.js"></script>

</head>
<body>
<form id="postcodeForm">
Enter postcodes separated by commas<br>
<input type="text" id="postcodes" name="postcodes">
</br></br>
<input type="submit" value="Submit" id="submitButton">

</form>

<div id="theDiv">
</div>

<div id ="secondDiv"> </div>

<table id="theTable" border="1">
</table>

还有 Javascript

$( document ).ready(function() {


document.getElementById('submitButton').addEventListener('click', function() {

    var input = $('#postcodeForm').serializeArray();

    var postcodeString = input[0]["value"];

    var output = postcodeString.split(",");

    var postcodeString = "";

    // check each postcode to see if there is any false postcodes
    for (var postcode in output) {

        var newPostcode = checkPostCode(output[postcode]);

        if (newPostcode) {

            postcodeString += " true ";
        } else {

            postcodeString += " false ";
        }

    }

    if (postcodeString.indexOf("false") >= 0) {

        // string contains a false so output an error message
        window.alert("Sorry but you seem to have entered an incorrect postcode.")

    } else {
        // all the postcodes are correct, proceed to perform operations on them

        processPostcodesOnServer(output);


    }

}, false);

function processPostcodesOnServer(output) {


    var apiKey = "c590c63f5b3818271a87a3e89fa215ae";
    var distance = 10;
    var tableNumber = 0;
    //var output = ["WR141NE"];

    for (var postcode in output) {

        strippedPostcode = output[postcode].replace(/ /g,'');

        getLatAndLong(strippedPostcode);


    }

    function googleCallback(latitude, longitude, postcode) {

        contactServer(latitude, longitude, postcode);

    }

    /* Function to contact google and convert the postcode to lat long */ 
    function getLatAndLong(postcode) {

        var latitude;
        var longitude;

        var googleXmlHttp = new XMLHttpRequest();
        var googleUrl = "http://maps.googleapis.com/maps/api/geocode/json?address="+ postcode + "&sensor=false";

        googleXmlHttp.onreadystatechange = function() {
            if (googleXmlHttp.readyState == 4 && googleXmlHttp.status == 200) {

                var latLong = JSON.parse(googleXmlHttp.responseText);

                latitude = latLong.results[0].geometry.location.lat;

                longitude = latLong.results[0].geometry.location.lng;

                googleCallback(latitude, longitude, postcode);
            }
        }
        googleXmlHttp.open("GET", googleUrl, true);
        googleXmlHttp.send();
    }

    function contactServer(latitude, longitude, postcode) {

        var xmlhttp = new XMLHttpRequest();
        var networkStatsUrl = "http://api.opensignal.com/v2/networkstats.json?lat="+latitude+"&lng="+longitude+"&distance=" + distance + "&apikey=" + apiKey;

        /* 
            Functions to contact server and read JSON response back for NetworkStats
        */

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                var myArr = JSON.parse(xmlhttp.responseText);


                sortTableData(myArr, postcode);

                //displayData(myArr);

            }
        }
        xmlhttp.open("GET", networkStatsUrl, true);
        xmlhttp.send();

        var functionCount = -1;

        function sortTableData(arr, postcode) {

            tableNumber++;

            $("body").append("</br>" + postcode + "</br>");

            theTable = "<table id='table"+ tableNumber + "' border='1'> </table>"

            $("body").append(theTable);

            var column1 = new Array();
            var column2 = new Array();
            var column3 = new Array();
            var column4 = new Array();
            var column5 = new Array();
            var column6 = new Array();
            var column7 = new Array();

            //var output = '<table border="1">';
            //var output = "";

            for (var obj in arr) {  

                // find all the networks 
                if ((typeof arr[obj] === 'object') && (obj == "networkRank")) {

                    var networks = new Object();
                    networks = arr[obj]; 

                    var allNetworkKeys = Object.keys(networks);

                    //console.log(allNetworkKeys);

                    var networksArray = new Array();

                    $.each(networks, function(networkKey, networkValue){
                        //Do something with your key and value.

                        column1.push(networkKey);

                        if (networkKey.substring(0, 7) == "network") {

                            $.each(networkValue, function(networkTypeKey, networkTypeValue){

                                if (networkTypeKey == "type2G") {

                                    column2.push('');
                                    column3.push(networkTypeKey);

                                    for (var variable in networkTypeValue) {

                                        column2.push(variable);
                                        column3.push(networkTypeValue[variable]);
                                    }

                                } else if (networkTypeKey == "type3G") {

                                    column4.push('');
                                    column5.push(networkTypeKey);

                                    for (var variable in networkTypeValue) {

                                        column4.push(variable);
                                        column5.push(networkTypeValue[variable]);
                                    }

                                } else if (networkTypeKey == "type4G") {

                                    column6.push('');
                                    column7.push(networkTypeKey);

                                    for (var variable in networkTypeValue) {

                                        column6.push(variable);
                                        column7.push(networkTypeValue[variable]);
                                    }
                                }


                            });

                            //console.log(column1); 
                        }

                        //console.log(column1, column2, column3, column4);
                        displayTable(column1, column2, column3, column4, column5, column6, column7);
                        column1 = []; column2 = []; column3 = []; column4 = []; column5 = []; column6 = []; column7 = [];
                    });

                }

            }


        }

        var counter = 0;

        function displayTable(column1, column2, column3, column4, column5, column6, column7) {

            var output = ""

            //console.log(counter);
            counter++;

            var column1Length = column1.length;
            var column2Length = column2.length;
            var column3Length = column3.length;
            var column4Length = column4.length;
            var column5Length = column5.length;
            var column6Length = column6.length;
            var column7Length = column7.length;

            var highestNumber = Math.max(column1Length, column2Length, column3Length, column4Length, column5Length, column6Length, column7Length);

            for (var i=0; i<highestNumber; i++) {

                var column1Reference = column1[i];
                var column2Reference = column2[i];
                var column3Reference = column3[i];
                var column4Reference = column4[i];
                var column5Reference = column5[i];
                var column6Reference = column6[i];
                var column7Reference = column7[i];

                if (column1Reference === void 0) { 
                    column1Reference = " " 
                }
                if (column2Reference === void 0) { 
                    column2Reference = " " 
                }
                if (column3Reference === void 0) { 
                    column3Reference = " " 
                }
                if (column4Reference === void 0) { 
                    column4Reference = " " 
                }
                if (column5Reference === void 0) { 
                    column5Reference = " " 
                }
                if (column6Reference === void 0) { 
                    column6Reference = " " 
                }
                if (column7Reference === void 0) { 
                    column7Reference = " " 
                }


                output += "<tr>";

                output += "<td>" + column1Reference + "</td>";
                output += "<td>" + column2Reference + "</td>";
                output += "<td>" + column3Reference + "</td>";
                output += "<td>" + column4Reference + "</td>";
                output += "<td>" + column5Reference + "</td>";
                output += "<td>" + column6Reference + "</td>";
                output += "<td>" + column7Reference + "</td>";
                output += "</tr>";

            }
            //output += "</table>";

            //var table = document.getElementById('theTable');

            //console.log(output);

            //oldOutput = table.innerHTML;

            //table.innerHTML = oldOutput + output;

            $("#table" +tableNumber).append(output);

            console.log(output);



        }


    }

}

});

【问题讨论】：

你能去掉一些不相关的代码吗？
你也想用jquery吗？因为您混合使用了香草 js 和 jq，而且根本不清楚原因。
您好，我已经将代码精简了一点，但如果不删除对于理解问题至关重要的内容，我可以取出的内容不多。
我尝试使用 vanilla JS，但我发现有些东西卡住了，所以我不得不导入 JQuery 来克服它们。
尝试使用$('#submitButton').on( 而不是document.getElementById('submitButton').addEventListener(。

标签： javascript jquery html

【解决方案1】：

好的，我搞定了。
如果只提交表单不会重新加载页面，表格实际上会显示出来。

有两种解决方法：

将您的 `click` 处理程序更改为 `submit` 处理程序并取消事件！

替换

document.getElementById('submitButton').addEventListener('click', function() {
    // ...
}, false);

通过

document.getElementById('postcodeForm').addEventListener('submit', function(event) {
    event.preventDefault();
    // ...
}, false);

删除表格：

这就像从您的 HTML 代码中删除 <form id="postcodeForm"> 和 </form> 一样简单，但是由于您在 JS 中使用 $('#postcodeForm')，您将不得不进行更改
```
var input = $('#postcodeForm').serializeArray();
var postcodeString = input[0]["value"];
var output = postcodeString.split(",");
```
进入
```
var output = document.getElementById('postcodes').value.split(",");
```
让它发挥作用。
（实际上并不需要内联 postcodeString，但我建议这样做，见下文。）
如果您选择此选项，我建议您也从#postcodes 中删除name 属性，因为它没有任何作用。

但无论您选择哪个选项，您都应该修复所有这些 </br>s：它在 HTML 5 中是 <br>（在 HTML 4 中是 <br/>，但绝不是 </br>）。
（不要忘记你的 JS 中的那些！）

如果googleCallback 函数只将其参数传递给具有完全相同的参数列表的函数，那么它有什么用？为什么不直接使用contactServer？

而且这段代码效率真的很低：

var postcodeString = "";
// check each postcode to see if there is any false postcodes
for(var postcode in output)
{
    var newPostcode = checkPostCode(output[postcode]);
    if(newPostcode)
    {
        postcodeString += " true ";
    }
    else
    {
        postcodeString += " false ";
    }
}
if(postcodeString.indexOf("false") >= 0)
{
    // string contains a false so output an error message
    window.alert("Sorry but you seem to have entered an incorrect postcode.")
}
else
{
    // all the postcodes are correct, proceed to perform operations on them
    processPostcodesOnServer(output);
}

我的意思是，字符串，真的吗？考虑：

// check each postcode to see if there is any invalid postcodes
for(var postcode in output)
{
    if(checkPostCode(output[postcode]) === false)
    {
        // current postcode is invalid so output an error message and return
        window.alert("Sorry but you seem to have entered an incorrect postcode.");
        return;
    }
// at this point, all the postcodes are valid, proceed to perform operations on them
processPostcodesOnServer(output);

此外，您只使用了很多变量一次，这会导致相当大的开销。
例如，这个：

var column1Length = column1.length;
var column2Length = column2.length;
var column3Length = column3.length;
var column4Length = column4.length;
var column5Length = column5.length;
var column6Length = column6.length;
var column7Length = column7.length;
var highestNumber = Math.max(column1Length, column2Length, column3Length, column4Length, column5Length, column6Length, column7Length);

可以简写成这样：

var highestNumber = Math.max(column1.length, column2.length, column3.length, column4.length, column5.length, column6.length, column7.length);

当然，这会使行长一点，但是对于 7 个额外的字符，您可以节省 7 个整行！

或者，您的 displayTable 函数实际上可以缩短为：

function displayTable()
{
    var output = '';
    var highestNumber = Math.max(arguments[0].length, arguments[1].length, arguments[2].length, arguments[3].length, arguments[4].length, arguments[5].length, arguments[6].length);
    for(var i = 0; i < highestNumber; i++)
    {
        output += '<tr>';
        for(var j = 0; j < 7; j++)
        {
            output += '<td>' + arguments[j][i] + '</td>';
        }
        output += '</tr>';
    }
    $('#table' + tableNumber).append(output);
}

那么，您的 RegEx 中有很多 {1} - 为什么？ [0-9]{1} 等于 [0-9]（或 \d，但如果在字符串中使用，请小心转义 \）。

最后，我建议您通过JSHint 或类似的方式运行您的代码以消除不一致（不过要小心 JSLint，因为它具有非常激进和不合理的约定）。

【讨论】：

非常感谢。是的，这就是问题所在。并感谢您的有用提示。我会看看我能对他们做些什么。

【解决方案2】：

你有两次var postcodeString。

var 关键字在每个范围内只能使用一次。

【讨论】：

虽然多次声明一个变量肯定不漂亮，但实际上并没有错，见here。

将您的 click 处理程序更改为 submit 处理程序并取消事件！

删除表格：

将您的 `click` 处理程序更改为 `submit` 处理程序并取消事件！