为什么我继续在控制台日志中获取null? [英] Why do I keep on getting null in the console log?

问题描述

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

In the JS, I am creating an input element which will be nested inside a div with id "scripts" on the html. I attach a value to that input field via JS and later on I want to catch the value of the input in another JS function. The problem is that when I run the page in the inspect element I can see that there is a value in the input that I created, that input has id "spam_key", but the function that I have created to access and get the value out of the input element is not working properly. If I go to the console, and write console.log(str) I am getting null as result.

这是HTML中的内容:

Here is what I have in the HTML:

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

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

This is the HTML when I run the page and the input field is created:

<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 + '>');
    });


});

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

And this is what I use to get the value of the input element:

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

这里的str的值应该是appled:

Here the value of str should be appled:

$(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
});

推荐答案

我要做的是将输入检索功能的主体从第二个$(document).ready()移到getJSON的callback function创建input元素后的方法.这样，我们可以确保在元素创建后对其进行访问.我还向存储值的全局范围添加了var str;.

What I've done is to move the body of your input-retrieval-function from the second $(document).ready() to the callback function of your getJSON method after you've created the input element. This way we can make sure to access it after the element is created. I've also added a var str; to the global scope where you store the value.

希望有帮助.

    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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！