[英]Why do I keep on getting null in the console log?
In the JS, I am creating an input element which will be nested inside a div with id "scripts" on the html. 在JS中,我创建了一个输入元素,它将嵌套在html上带有id“scripts”的div中。 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. 我通过JS将值附加到该输入字段,稍后我想在另一个JS函数中捕获输入的值。 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. 问题是当我在inspect元素中运行页面时,我可以看到我创建的输入中有一个值,该输入具有id“spam_key”,但是我创建的函数用于访问并获取值输入元素的工作不正常。 If I go to the console, and write console.log(str) I am getting null as result. 如果我去控制台,并编写console.log(str)我得到null作为结果。
Here is what I have in the HTML: 这是我在HTML中的内容:
<div id="scripts" name="scripts">
</div>
This is the HTML when I run the page and the input field is created: 当我运行页面并创建输入字段时,这是HTML:
<div id="scripts" name="scripts">
<input type="number" id="spam_key" value="239">
</div>
Now, this is my JS: 现在,这是我的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: 这就是我用来获取input元素的值:
var str;
$(document).ready(function () {
element = document.getElementById('spam_key');
if (element !== null) {
str = element.value;
}
else {
str = null;
}
});
Here the value of str should be appled: 这里应该应用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
});
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. 我所做的是在创建input
元素后,将输入检索函数的主体从第二个$(document).ready()
到getJSON
方法的callback function
。 This way we can make sure to access it after the element is created. 这样我们就可以确保在创建元素后访问它。 I've also added a var str;
我还添加了一个var str;
to the global scope where you store the value. 到存储值的全局范围。
Hope that helps. 希望有所帮助。
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
});
});
Here is a sample from the JSON: 以下是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
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.