为什么我一直在控制台日志中显示为空？

Question

在 JS 中，我正在创建一个输入元素，该元素将嵌套在 html 上 id 为“scripts”的 div 中。我通过 JS 将一个值附加到该输入字段，稍后我想在另一个 JS 函数中捕获输入的值。问题是，当我在检查元素中运行页面时，我可以看到我创建的输入中有一个值，该输入的 id 为“spam_key”，但我创建的函数用于访问和获取值的输入元素不能正常工作。如果我去控制台，写 console.log(str) 我得到 null 结果。

这是我在 HTML 中的内容：

<div id="scripts" name="scripts">
    </div>

这是我运行页面并创建输入字段时的 HTML：

<div id="scripts" name="scripts">
    <input type="number" id="spam_key" value="239">
</div>

现在，这是我的 JS：

var c = 0;
var a;
var b;
function counter() {
    return c++;
}

$(document).ready(function () {
    var url = "https://graph.facebook.com/v3.2/...";

    $.getJSON(url, function (data) {
        var items = [];
        $.each(data.data, function (i, obj) {
            //$('#target').append($('<div/>', { id: 'dummy' + i }))
            var text = '<p class="review_text">' + obj.review_text + '</p>'
            var date = '<p class="date">' + obj.created_time + '</p>'
            a = counter();
            $("#carousel").find("[data-index='" + i + "']").append(text, date)

        });
        $('#scripts').append('<input type="number" id="spam_key" value= ' + a + '>');
    });


});

这就是我用来获取输入元素值的方法：

var str;
$(document).ready(function () {
    element = document.getElementById('spam_key');
    if (element !== null) {
        str = element.value;
    }
    else {
        str = null;
    }
});

这里应该使用str的值：

$(document).ready(function () {
    var wrapper = document.getElementById("carousel");
    var myHTML = '';
    for (b = 0; b <= str; b++) {
        myHTML += '<div id="review" data-index=' + (b) + '></div>';
    }
    wrapper.innerHTML = myHTML
});

Answer 1

我所做的是在创建 input 元素后，将输入检索函数的主体从第二个 $(document).ready() 移动到 getJSON 方法的 callback function。这样我们可以确保在创建元素后访问它。我还在您存储值的全局范围内添加了 var str;。

希望对您有所帮助。

    var c = 0;
    var a;
    var b;
    var str;
    function counter() {
        return c++;
    }

    $(document).ready(function () {
        var url = "https://graph.facebook.com/v3.2/...";

        $.getJSON(url, function (data) {
            var items = [];
            $.each(data.data, function (i, obj) {
                //$('#target').append($('<div/>', { id: 'dummy' + i }))
                var text = '<p class="review_text">' + obj.review_text + '</p>'
                var date = '<p class="date">' + obj.created_time + '</p>'
                a = counter();
                $("#carousel").find("[data-index='" + i + "']").append(text, date)

            });
            $('#scripts').append('<input type="number" id="spam_key" value= ' + a + '>');
            element = document.getElementById('spam_key');
            if (element !== null) {
                str = element.value;
            }
            else {
                str = null;
            }
            var wrapper = document.getElementById("carousel");
            var myHTML = '';
            for (b = 0; b <= str; b++) {
                myHTML += '<div id="review" data-index=' + (b) + '></div>';
            }
            wrapper.innerHTML = myHTML       
        });
});

Answer 2

这是来自 JSON 的示例：

{
   "data": [
      {
         "has_review": true,
         "review_text": "Mng sum zadovolna se bese \ud83d\udc4c\ud83c\udffc",
         "recommendation_type": "positive",
         "created_time": "December 6, 2018",
         "open_graph_story": {
            "id": "1924663150981821",
            "message": "Mng sum zadovolna se bese \ud83d\udc4c\ud83c\udffc",
            "start_time": "December 6, 2018",
            "type": "sellers.rates",
            "data": {
               "recommendation_type": "positive",
               "review_text": "Mng sum zadovolna se bese \ud83d\udc4c\ud83c\udffc",
               "is_hidden": false,
               "language": "mk",
               "seller": {
                  "id": "2075976265961628",
                  "title": "My Spa Home & Office Massage - \u041c\u0430\u0441\u0430\u0436\u0430 \u0432\u043e \u0432\u0430\u0448\u0438\u043e\u0442 \u0434\u043e\u043c \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u043d\u043e \u043c\u0435\u0441\u0442\u043e",
                  "type": "place",
                  "url": "https://www.facebook.com/myspamk/"
               },
               "has_review_update": false
            }
         },
         "has_rating": false
      },
      {
         "has_review": true,
         "review_text": "\u041e\u0434\u043b\u0438\u0447\u043d\u043e \u0438\u0441\u043a\u0443\u0441\u0442\u0432\u043e. \u0420\u0435\u0442\u043a\u043e \u0441\u0430\u043a\u0430\u043c \u043c\u0430\u0441\u0430\u0436\u0438, \u0437\u0430\u0448\u0442\u043e \u043c\u0438 \u0441\u0435 \u043d\u0435\u043f\u0440\u0438\u0458\u0430\u0442\u043d\u0438 \u0447\u0435\u0441\u0442\u043e, \u043d\u043e, \u043e\u0432\u0430 \u0442\u043e\u043f\u043b\u043e \u0433\u043e \u043f\u0440\u0435\u043f\u043e\u0440\u0430\u0447\u0443\u0432\u0430\u043c! \u0411\u0440\u0430\u0432\u043e \u0434\u0435\u0447\u043a\u0438. \u2764",
         "recommendation_type": "positive",
         "created_time": "December 5, 2018",
         "open_graph_story": {
            "id": "1145960125557706",
            "message": "\u041e\u0434\u043b\u0438\u0447\u043d\u043e \u0438\u0441\u043a\u0443\u0441\u0442\u0432\u043e. \u0420\u0435\u0442\u043a\u043e \u0441\u0430\u043a\u0430\u043c \u043c\u0430\u0441\u0430\u0436\u0438, \u0437\u0430\u0448\u0442\u043e \u043c\u0438 \u0441\u0435 \u043d\u0435\u043f\u0440\u0438\u0458\u0430\u0442\u043d\u0438 \u0447\u0435\u0441\u0442\u043e, \u043d\u043e, \u043e\u0432\u0430 \u0442\u043e\u043f\u043b\u043e \u0433\u043e \u043f\u0440\u0435\u043f\u043e\u0440\u0430\u0447\u0443\u0432\u0430\u043c! \u0411\u0440\u0430\u0432\u043e \u0434\u0435\u0447\u043a\u0438. \u2764",
            "start_time": "December 5, 2018",
            "type": "sellers.rates",
            "data": {
               "recommendation_type": "positive",
               "review_text": "\u041e\u0434\u043b\u0438\u0447\u043d\u043e \u0438\u0441\u043a\u0443\u0441\u0442\u0432\u043e. \u0420\u0435\u0442\u043a\u043e \u0441\u0430\u043a\u0430\u043c \u043c\u0430\u0441\u0430\u0436\u0438, \u0437\u0430\u0448\u0442\u043e \u043c\u0438 \u0441\u0435 \u043d\u0435\u043f\u0440\u0438\u0458\u0430\u0442\u043d\u0438 \u0447\u0435\u0441\u0442\u043e, \u043d\u043e, \u043e\u0432\u0430 \u0442\u043e\u043f\u043b\u043e \u0433\u043e \u043f\u0440\u0435\u043f\u043e\u0440\u0430\u0447\u0443\u0432\u0430\u043c! \u0411\u0440\u0430\u0432\u043e \u0434\u0435\u0447\u043a\u0438. \u2764",
               "is_hidden": false,
               "language": "mk",
               "seller": {
                  "id": "2075976265961628",
                  "title": "My Spa Home & Office Massage - \u041c\u0430\u0441\u0430\u0436\u0430 \u0432\u043e \u0432\u0430\u0448\u0438\u043e\u0442 \u0434\u043e\u043c \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u043d\u043e \u043c\u0435\u0441\u0442\u043e",
                  "type": "place",
                  "url": "https://www.facebook.com/myspamk/"
               },
               "has_review_update": false
            }
         },
         "has_rating": false
      },
      {
         "has_review": true,
         "review_text": "The best massage in Skopje, highly recommend!",
         "recommendation_type": "positive",
         "created_time": "November 28, 2018",
         "open_graph_story": {
            "id": "10214943185147892",
            "message": "The best massage in Skopje, highly recommend!",
            "start_time": "November 28, 2018",
            "type": "sellers.rates",
            "data": {
               "recommendation_type": "positive",
               "review_text": "The best massage in Skopje, highly recommend!",
               "is_hidden": false,
               "language": "en",
               "seller": {
                  "id": "2075976265961628",
                  "title": "My Spa Home & Office Massage - \u041c\u0430\u0441\u0430\u0436\u0430 \u0432\u043e \u0432\u0430\u0448\u0438\u043e\u0442 \u0434\u043e\u043c \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u043d\u043e \u043c\u0435\u0441\u0442\u043e",
                  "type": "place",
                  "url": "https://www.facebook.com/myspamk/"
               },
               "has_review_update": false
            }
         },
         "has_rating": false
      },