Javascript 文件。在后续代码后颁布的位置

你好，可爱的斯塔克沃夫人

我正在尝试使用JavaScript、AJAX和PHP创建一个动态页面

我已经创建了一个具有唯一ID号1-12的图像列表。单击一个时，它应该将该id传递到一个函数，该函数更改页面，然后使用id号将内容加载到新页面

我的问题是，当我使用document.location来更改页面（或window.assign）时，在执行加载到内容中的以下代码之前，它不会更改页面。因此，它尝试将内容加载到当前页面上不存在的div中，然后更改页面。有人知道这是为什么吗？我怎样才能解决它

我已经尝试将document.location和innerHTML代码放在不同的函数中，但在页面更改之前仍会调用下一个函数。我还尝试在内容加载之前放置if语句，但在页面更改之前也会调用该语句

这是我的密码：

    function output (bookList){
         for (var i = 0; i < titles.length; i++) {  
         document.getElementById("insertBooksHere").innerHTML += "<ul class=\"bookItem\">";
            for (var t = 0; t<position.length; t++){ 

                if (t==position.length-1)
                        {
                            x = bookList[i][0];
                            document.getElementById("insertBooksHere").innerHTML += "<img class=\'books\'  id = \'" + x + "\' src=\'" +bookList[i][t]+ "\' onClick=\'getBookDetails("+ x +")\'>";
                        }
                        else 
                if ( t == 1 || t==2){   
                        document.getElementById("insertBooksHere").innerHTML += "<li>"+bookList[i][t]+"</li>";
                        }
            }
        document.getElementById("insertBooksHere").innerHTML += "</ul></div>";
    }
    }


    function getBookDetails(id){
        bookID = id;    
        for ( var t = 0; t<12; t++)
        {
        bookDetails[t] = bookList[bookID-1][t];//grab details about specified book from array using x as the value for i.
        }
        loadBookPage(bookID, bookDetails)
    }


function loadBookPage(bookID, bookDetails){
    console.log(window.location.href);
}


function loadBookDetails(){
if ( document.location == 'books/'+bookID+'.php')
{
        x = bookID;
    console.log(bookDetails);
         document.getElementById("book").innerHTML += "<ul class=\"bookItem\">";

        for (var t = 0; t<position.length; t++){ 

            if (t==position.length-1)
                    {
                        document.getElementById("book").innerHTML += "<img class=\'books\' id = \'" + x + "\' src=\'" +bookDetails[t]+ "\'>";

                    }
                    else {  
                    document.getElementById("book").innerHTML += "<li>"+bookDetails[t]+"</li>";
                    console.log("for loop");
                    }
        console.log(bookDetails[t]);
        }
    document.getElementById("book").innerHTML += "</ul>";
    document.getElementById("book").innerHTML += "HELLO!!!";
    }
}

函数输出（图书列表）{
对于（var i=0；i”；
对于（var t=0；t
我的问题是，当我使用document.location来更改页面（或window.assign）时，在执行加载到内容中的以下代码之前，它不会更改页面

这就是JavaScript（运行客户端时，嵌入到网页中）的工作方式

它在那个页面上运行

如果页面消失（因为您加载了一个新页面），那么它的执行环境就会消失，并停止运行

如果您想在下一页中执行某些操作，则必须向该页传递一些数据，并让新页中的代码读取这些数据并对其执行操作

理想情况下，您可以使用服务器端代码来实现这一点（因为在加载新页面时，很少会有额外的运行时成本）。
哦，那么使用PHP POST将变量发送到下一页？当然！感谢您的快速响应：）