问题

Question

问题

我正在为FreeCodeCamp制作维基百科查看器。当我使用Jetbrains Webstorm IDE执行我的代码时，我在搜索结果的末尾创建了总共10个额外的div。

当我使用JSfiddle这样做时，我看到了正确的结果，这应该只是最初的10个搜索结果，而不是+10个更多的空div容器。

知道发生了什么事吗？

故障排除

经过深入研究后，似乎这更像是一个浏览器问题，而不是IDE问题。它看起来只是Chrome才能做到这一点？我试过Firefox和IE，它正常运行，就像JSfiddle一样。我还尝试清除Chrome上的所有Cookie和缓存。

当我打开控制台日志并查看元素时，在Chrome中，显然有10个额外的空div，如图所示here.

但在Firefox中，相同的代码不会创建div，如here.

所示

编辑：好的，所以在Chrome中，如果您按Enter键，而不是单击搜索按钮，则会创建额外的div。但是，如果单击搜索图标，结果将正确显示。有谁能解释为什么？我是否错误地放置/写入了.keyup()代码块？

这是issue.

的图片

Javascript部分：

$(function(){
$("#search-bar").keyup(function(event) {
    if(event.keyCode === 13) {
        $(".btn").click();
    }
});
$(".btn").click(function() {
    $("#results").empty();
    var searchTerm = $("#search-bar").val();
    var url = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + searchTerm + "&utf8=&format=json&origin=*";
    console.log(url);
    $.ajax({
        cache: false,
        url: url,
        type: 'GET',
        success: function(data) {
            // Create a blank array to store the specific URLs in
            var urlArr = [];
            for (var i=0; i <= data.query.search.length; i++) {
                // Adding the variables for use here
                var headerData = data.query.search[i].title;
                var urlSearchTerm = headerData.replace(/\s/gi, '_');
                var snippetData = data.query.search[i].snippet + "...";
                var createDiv = document.createElement("div");
                var createHeader = document.createElement("h1");
                var createSnippet = document.createElement("p");
                var divId = "div" + i.toString();
                var headerId = "header" + i.toString();
                var snippetId = "snippet" + i.toString();
                var resultUrl = "https://en.wikipedia.org/wiki/";
                urlArr[i] = resultUrl + urlSearchTerm;
                // Create the div element, give it an id
                // Create <h1> element, give it an id
                // Create <p> element, give it an id
                // Give each <div> a class
                createDiv.setAttribute("id", divId);
                createHeader.setAttribute("id", headerId);
                createSnippet.setAttribute("id", snippetId);
                createDiv.setAttribute("class", "each-result");
                // appending <div> elements in the #results id element in body
                // appending <h1> element to the div element
                // appending <p> element to the div element
                document.getElementById("results").appendChild(createDiv);
                document.getElementById(divId).appendChild(createHeader);
                document.getElementById(divId).appendChild(createSnippet);
                // populate json data into <h1> element
                // populate json data into <p> element
                $("#header" + i.toString()).text(headerData);
                $("#snippet" + i.toString()).html(snippetData);
                // create a click event handler that does 2 things
                // 1. Gives each div an element that has a URL in the resultUrl array
                // 2. Opens that url in a new window
                (function(i) {
                    $("#div" + i.toString()).click(function() {
                        window.open(urlArr[i]);
                });
                }(i));



            }
        }
    });

});

$("#random-wiki-button").click(function() {
   window.open("https://en.wikipedia.org/wiki/Special:Random");
});

});

实际完整代码，包括html / css + JS：JSfiddle

Answer 1

也许尝试更新Chrome？

我会尝试将for循环更改为for (var i=0; i < 10; i++) {，这样增量会在第10项停止。

编辑。

Chrome输出的内容与其他浏览器/ IDE不同

问题

故障排除

1 个答案: