Javascript - 页面仅在按钮单击两次后显示答案

【问题标题】：Javascript - Page displays only after button clicked twiceJavascript - 页面仅在按钮单击两次后显示
【发布时间】：2023-03-22 23:12:01
【问题描述】：

第一个问题是第一次点击按钮时页面不显示。第二个相关问题是第一次单击按钮时出现错误“无法读取未定义的属性'innerHTML'”，尽管单击两次按钮时一切正常。

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.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>

【问题讨论】：

标签： javascript jquery ajax dom scope

【解决方案1】：

为了澄清一些事情，你的其他语句也应该在 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）

【讨论】：

【解决方案2】：

你的问题的罪魁祸首是：

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) {...}); 内运行，要么从中调用，你应该没问题。