重定向到新页面时代码未执行

Question

When i click on Buy Now button the next page appears but it is not showing the contents which want it to show. What is wrong with this code?

This is HTML code:

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

This is second page code which opens after clicking on Buy Now

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

And this is the JavaScript code

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

As you can see below, the page shows that the values haven't been inserted:

Answer 1

You are using an a element which is redirecting the user to another page. The JavaScript will run on click of the button when the user is on the first page. However it will not run on the second page, as it has no way of knowing the code was supposed to be executed. If you visit BuyCourse.html directly, do you expect a code to run? No.

One way to make this work is by adding parameters to the URL of the GET call, then on the second page extract the parameters from the URL with a JavaScript code, and update the content of the page.

---

Below is an example of such method: in the first page we have removed the a tag. Instead we will handle the redirection with JavaScript. Instead of just redirecting to BuyCourse.html we will redirect to BuyCourse.html with some parameters. A way to do this is making a GET call and adding parameters to the URL. You can read more here about it.

For instance, here we are retrieving the value of the button that was clicked and adding it to the URL path. You can have multiple parameters of course. The URLSearchParams class will handle the conversion object -> url param object . Once stringified URLSearchParams will look just like the path you want.

 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>

When clicking on the button, it should redirect you to something like 'BuyCourse.html?value=Java' .

On the second page you will have to retrieve the parameters... this time from the URL itself. You can get the URL of the current page with document.location then create an URL object and select the key you want:

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