Почему я продолжаю получать нулевое значение в журнале консоли?

В JS я создаю элемент ввода, который будет вложен в div с id "скриптами" в html. Я прикрепляю значение к этому полю ввода через JS, а позже я хочу уловить значение ввода в другой функции JS. Проблема в том, что когда я запускаю страницу в элементе проверки, я вижу, что во входных данных, которые я создал, есть значение, этот вход имеет идентификатор «spam_key», но функция, которую я создал для доступа и получения значения элемента ввода не работает должным образом. Если я перейду на консоль и напишу console.info (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
});

Может быть, вы пытаетесь получить элемент перед его созданием?

— 15.12.2018 12:19

Обновлено: @kev опередил меня, но я просто оставлю его здесь: учитывая, что он возвращает null, а u явно устанавливает str = null, если элемент не создан, может показаться, что элемент не может быть создан до того, как вы вызовете скрипт получить значение?

— 15.12.2018 12:19

@kev Я думал о том же самом, но в остальном я понятия не имею, как оценить это ... если у вас есть какие-либо идеи, не могли бы вы мне помочь? :)

— 15.12.2018 12:20

@ Chri.s да, вероятно, он ищет элемент с id spam_key до его создания .. Как я могу настроить поиск элемента и получить его значение после создания элемента?

— 15.12.2018 12:22

Дай мне секунду, и я что-нибудь здесь сделаю

— 15.12.2018 12:23

Не могли бы вы добавить образец ответа JSON с URL-адреса?

— 15.12.2018 12:24

@JackBashford ответ JSON от html - это отзывы со страницы FB

— 15.12.2018 12:28

@JackBashford вот и все, я поместил часть из JSON ниже

— 15.12.2018 12:30

Извините, но я не понимаю, что вы имеете в виду. Не могли бы вы отредактировать свой вопрос с помощью образца ответа в формате JSON или предоставить ссылку на него.

— 15.12.2018 12:30

@JackBashford, JSON - это данные из обзоров страниц Facebook, ниже я опубликовал комментарий с частью этих данных

— 15.12.2018 12:31

Привет, Виктор, дайте мне знать, сработал ли мой ответ для вас.

— 15.12.2018 12:32

@ViktorGavrilovic попробуйте заменить $(document).ready(function () на $(window).on("load", function () в той части, где вы получаете значение

— 15.12.2018 12:34

@ Chri.s Я пробовал это .. не работает

— 15.12.2018 12:36

javascript jquery html json function

15.12.2018 12:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

565

Ответы 2

Что я сделал, так это переместил тело вашей функции ввода-поиска со второго $(document).ready() в callback function вашего метода getJSON после того, как вы создали элемент input. Таким образом, мы сможем получить к нему доступ после создания элемента. Я также добавил 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       
        });
});

Я просто попробовал, это не работает .. Я снова получаю null, когда я console.info (str)

— 15.12.2018 12:27

Да, теперь он работает, но если я хочу использовать значение str вне $ getJSON

— 15.12.2018 12:49

str объявлен глобально наверху, так что у вас не должно возникнуть проблем с этим.

— 15.12.2018 12:50

Я только что обновил код, вы можете видеть, где я хочу получить доступ к значению str. Да, знаю, но это не работает.

— 15.12.2018 12:51

когда я console.og (str) вне $ getJSON, я получаю undefined

— 15.12.2018 12:58

Я обновил код, чтобы он заработал. Примечание об использовании getJSON: эта функция является асинхронной, поэтому она получает анонимную функцию, которая будет выполнена в случае успеха. Если вы используете console.info в стиле $ (document) .ready, str не будет заполнена, потому что браузер только что начал его получать.

— 15.12.2018 13:02

Позвольте нам продолжить обсуждение в чате.

— 15.12.2018 13:21

Я запустил код, который вы отредактировали, он работает так, как я хочу, он получает правильное значение str и создает элементы div, но теперь есть другая проблема, когда я создаю элементы div, я создаю их внутри div карусели совы, поэтому они автоматически добавляются в карусель совы, но с помощью этого кода они добавляются в div, но не получают класс элемента совы, а также другие вещи, которые важны для карусели совы, а также, таким образом, он просто создает div и div не заполняются содержимым из JSON.

— 15.12.2018 13:40

Я здесь новичок и не очень хорошо знаю правила, но я думаю, что вам будет лучше, если вы создадите новый вопрос со всем описанным кодом и проблемой, потому что этот вопрос выходит за пределы начальной области.

— 15.12.2018 13:43

stackoverflow.com/questions/53792523/…

— 15.12.2018 13:55

15.12.2018 12:25

Вот образец из 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
      },

Не могли бы вы отредактировать свой вопрос, указав эту информацию?

— 15.12.2018 12:31

15.12.2018 12:29