Javascript - 页面仅在按钮单击两次后显示
Javascript - Page displays only after button clicked twice
第一个问题是第一次点击按钮时没有显示页面。第二个相关的问题是第一次单击按钮时出现错误 "Cannot read property 'innerHTML' of undefined",尽管单击两次按钮时一切正常。
main.js
var surveyPage = '';
var surveyQuestions = '';
var surveyPageData = '';
var fakeDiv = document.createElement( 'div' );
function get_surveyPageHtml(url) {
$.get(url, function(data) {
//console.log(data);
surveyPage = data;
fakeDiv.innerHTML = '';
fakeDiv.innerHTML = data;
});
surveyQuestions = '';
surveyQuestions = fakeDiv.getElementsByClassName('question');
console.log(surveyQuestions);
surveyPageData = surveyQuestions[1].innerHTML;
console.log(surveyPageData);
}
$(document).ready(function() {
url = "page/page.html";
$("#button").click(function(){
get_surveyPageHtml(url);
$("#display").html(surveyPage);
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div>
<button id="button">Get page data</button>
</div>
<div id="display"></div>
</body>
</html>
page/page.html
<h2>Survey</h2>
<label class="question">Question 1</label>
<label class="question">Question 2</label>
<div class="question">
Question 3
<label class="question">Question 4</label>
</div>
您的问题的罪魁祸首是:
get_surveyPageHtml(url);
$("#display").html(surveyPage);
AJAX 请求需要时间,您正尝试在 AJAX 请求完成之前使用响应。您可以通过将 $("#display").html(surveyPage);
移动到此处来解决此问题:
//...
$.get(url, function(data) {
//console.log(data);
surveyPage = data;
fakeDiv.innerHTML = '';
fakeDiv.innerHTML = data;
$("#display").html(surveyPage);
})
这样,页面会在 AJAX 响应到达时加载。
--编辑--
您获得 Cannot read property 'innerHTML' of undefined
的原因与第一个相同,只是在不同的代码块中。你应该这样做:
function get_surveyPageHtml(url) {
$.get(url, function(data) {
//console.log(data);
surveyPage = data;
fakeDiv.innerHTML = '';
fakeDiv.innerHTML = data;
$("#display").html(surveyPage);
surveyQuestions = '';
surveyQuestions = fakeDiv.getElementsByClassName('question');
console.log(surveyQuestions);
surveyPageData = surveyQuestions[1].innerHTML;
console.log(surveyPageData);
});
}
澄清一下,您的其他陈述也应该在 ajax 完成后进行。
$.get(url, function(data) {
// code...
surveyQuestions = '';
surveyQuestions = fakeDiv.getElementsByClassName('question');
console.log(surveyQuestions);
surveyPageData = surveyQuestions[1].innerHTML;
console.log(surveyPageData);
}
如果您正在使用 jQuery,这是一个很好的实践,我建议您这样做:
http://plnkr.co/edit/Rr5UtYcHNTUf0cEMf9pc(按运行看到main.js)
第一个问题是第一次点击按钮时没有显示页面。第二个相关的问题是第一次单击按钮时出现错误 "Cannot read property 'innerHTML' of undefined",尽管单击两次按钮时一切正常。
main.js
var surveyPage = '';
var surveyQuestions = '';
var surveyPageData = '';
var fakeDiv = document.createElement( 'div' );
function get_surveyPageHtml(url) {
$.get(url, function(data) {
//console.log(data);
surveyPage = data;
fakeDiv.innerHTML = '';
fakeDiv.innerHTML = data;
});
surveyQuestions = '';
surveyQuestions = fakeDiv.getElementsByClassName('question');
console.log(surveyQuestions);
surveyPageData = surveyQuestions[1].innerHTML;
console.log(surveyPageData);
}
$(document).ready(function() {
url = "page/page.html";
$("#button").click(function(){
get_surveyPageHtml(url);
$("#display").html(surveyPage);
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div>
<button id="button">Get page data</button>
</div>
<div id="display"></div>
</body>
</html>
page/page.html
<h2>Survey</h2>
<label class="question">Question 1</label>
<label class="question">Question 2</label>
<div class="question">
Question 3
<label class="question">Question 4</label>
</div>
您的问题的罪魁祸首是:
get_surveyPageHtml(url);
$("#display").html(surveyPage);
AJAX 请求需要时间,您正尝试在 AJAX 请求完成之前使用响应。您可以通过将 $("#display").html(surveyPage);
移动到此处来解决此问题:
//...
$.get(url, function(data) {
//console.log(data);
surveyPage = data;
fakeDiv.innerHTML = '';
fakeDiv.innerHTML = data;
$("#display").html(surveyPage);
})
这样,页面会在 AJAX 响应到达时加载。
--编辑--
您获得 Cannot read property 'innerHTML' of undefined
的原因与第一个相同,只是在不同的代码块中。你应该这样做:
function get_surveyPageHtml(url) {
$.get(url, function(data) {
//console.log(data);
surveyPage = data;
fakeDiv.innerHTML = '';
fakeDiv.innerHTML = data;
$("#display").html(surveyPage);
surveyQuestions = '';
surveyQuestions = fakeDiv.getElementsByClassName('question');
console.log(surveyQuestions);
surveyPageData = surveyQuestions[1].innerHTML;
console.log(surveyPageData);
});
}
澄清一下,您的其他陈述也应该在 ajax 完成后进行。
$.get(url, function(data) {
// code...
surveyQuestions = '';
surveyQuestions = fakeDiv.getElementsByClassName('question');
console.log(surveyQuestions);
surveyPageData = surveyQuestions[1].innerHTML;
console.log(surveyPageData);
}
如果您正在使用 jQuery,这是一个很好的实践,我建议您这样做:
http://plnkr.co/edit/Rr5UtYcHNTUf0cEMf9pc(按运行看到main.js)