重定向到新頁面時代碼未執行

Question

當我單擊“立即購買”按鈕時，會出現下一頁，但沒有顯示想要顯示的內容。 這段代碼有什么問題？

這是 HTML 代碼：

    <div class="card-body" style="height:260px;">
      <p class="card-text"> Java is a general-purpose programming language that is class-based, object-oriented, and designed to have as few implementation dependencies as possible</p>
    </div>
    <div class="card-footer" style="height:56px;">
      <center><a href="BuyCourse.html"><button type="submit" id="javabtn" onclick="BuyJava()" value="Java" class="btn btn-primary">Buy Now</Button></a></center>
    </div>

這是點擊立即購買后打開的第二頁代碼

 <div class="container" id="containerJava">
        <div>
          <div>
            <label style="font-size: 20; margin-top:50px; margin-left: 5px;">Course Name :-</label>
            <p id="lblcourse"></p>
          </div>

          <div>
            <label style="font-size: 20; margin-left: 5px;">Course Duration :-</label>
            <p id="lblduration"></p>
          </div>

          <div>
            <label style="font-size: 20; margin-left: 5px;">Course Price :-</label>
            <p id="lblprice"></p>
          </div>

這是 JavaScript 代碼

function BuyJava() {
    document.getElementById("lblcourse").innerHTML = "Java";
    document.getElementById("lblduration").innerHTML = "6 Months";
    document.getElementById("lblprice").innerHTML = "6000/-";
}

如下所示，該頁面顯示尚未插入值：

Answer 1

您正在使用一個將用戶重定向到另一個頁面a元素。 當用戶在第一頁上時，JavaScript 將在點擊按鈕時運行。 但是它不會在第二頁上運行，因為它無法知道應該執行的代碼。 如果您直接訪問BuyCourse.html ，您是否希望運行代碼？ 不。

實現這一目標的一種方法是向 GET 調用的 URL 添加參數，然后在第二個頁面上使用 JavaScript 代碼從 URL 中提取參數，並更新頁面的內容。

---

下面是這種方法的一個例子：在第一頁中，我們刪除了a標簽。 相反，我們將使用 JavaScript 處理重定向。 我們將使用一些參數重定向到BuyCourse.html ，而不是僅僅重定向到BuyCourse.html 。 一種方法是進行 GET 調用並向 URL 添加參數。 你可以在這里閱讀更多關於它的信息。

例如，這里我們檢索被點擊的按鈕的值並將其添加到 URL 路徑中。 當然，您可以有多個參數。 URLSearchParams類將處理轉換object -> url param object 。 一旦字符串化URLSearchParams看起來就像你想要的路徑。

 function BuyJava(element) { // here you can pass as many parameters // as you want in a key -> value format const params = { value: element.value } // convert the param object into an URLSearchParams // object which is a built-in structure const searchParams = new URLSearchParams(data); // redirect the user to the new page with the params window.location = 'BuyCourse.html?' + searchParams }

 <div class="card-body" style="height:260px;"> <p class="card-text"> Java is a general-purpose programming language that is class-based, object-oriented, and designed to have as few implementation dependencies as possible</p> </div> <div class="card-footer" style="height:56px;"> <center><button type="submit" id="javabtn" onclick="BuyJava(this)" value="Java" class="btn btn-primary">Buy Now</button></center> </div>

單擊按鈕時，它應該將您重定向到類似'BuyCourse.html?value=Java' 。

在第二頁上，您必須檢索參數……這次是從 URL 本身檢索。 您可以使用document.location獲取當前頁面的 URL，然后創建一個URL對象並選擇所需的鍵：

const url = new URL(document.location);
const value = url.searchParams.get('value');
document.getElementById("lblcourse").innerHTML = value;