How can I update a page from a click handler on another page?-CodePudding

I have got a "Flight Booking System" in HTML and CSS & JS. But the problem is when the person books a flight it is supposed to update the text in their dashboard, but it just won't work. The "onclick function" of my button does just not connect to the JS function. Please help?

HTML For The Page:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>S.B.S Booking System</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js"></script>
</head>
<body>
    <div >
        <a href="./index.html">Home</a>
        <a href="./book.html">Booking</a>
        <a href="./dashboard.html">Dashboard</a>
        <a href="./contact.html">Contact</a>
      </div>

    <h1 id="booktitle">Book A New Flight</h1>
    <h2 id="booktitle2">To Book A New Flight, Please Fill In The Form Below</h3>

    <form id="bookform" action="./contact.html">
        <label style="font-weight: 700;" for="ftakeoff">Where Will You Be Taking Off From?</label> <br>
        <input type="text" id="ftakeoff"><br>
        <label style="font-weight: 700;" for="fland">Where Will You Be Landing?</label> <br>
        <input type="text" id="fland"><br>
        <label style="font-weight: 700;" for="fname">What Is Your First - And Last - Name(s)?</label> <br>
        <input type="text" id="fname"><br>
        <label style="font-weight: 700;" for="fphone">What Is Your Phone Number?</label> <br>
        <input type="text" id="fphone"><br>
        <label style="font-weight: 700;" for="fextra">Any Extra Info (E.G: Time Of Flight, Accocomadtion, etc)</label> <br>
        <input type="text" id="fextra"><br>
        <button id="fsubmit" type="submit" onclick="cbookings()">Submit Flight Booking</button>
    </form>
        <button onclick="cbookings()">Submit</button>
</body>
</html>

HTML For The Dashboard Page:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>S.B.S Booking Dashboard</title>
    <link rel="stylesheet" href="style.css">  
    <script src="./script.js"></script>
</head>
<body>
    <div >
        <a href="./index.html">Home</a>
        <a href="./book.html">Booking</a>
        <a href="./dashboard.html">Dashboard</a>
        <a href="./contact.html">Contact</a>
      </div>

    <h1 id="title1">Your Booking Dashboard</h1>
    <h2 id="title2">Check Up On Your Flights</h2> <br> <br>

    <h2 id="bstatus">No Bookings...</h2>
</body>
</html>

JS:

    var statustext = document.getElementById("bstatus")
     
    function cbookings() {
        statustext.innerHTML = "1 Booking"
        alert("Worked")
    }

When I click "fsumbit" it should change "bstatus" to "1 Booking". It just doesnt work. My JS is connected to my pages because when I do a JS command outside of the function it works probably. I'm using basic JS and code.

Heres my github rep: https://github.com/samykcodes/sbsystem

Any my website: samsbookingsystem.netlify.app

CodePudding user response：

You're trying to use JS code to modify other pages of the website, which is not possible. When you click the button on the Booking page, document.getElementById("bstatus") is going to return a null value, since there is no element that has the ID 'bstatus' on the Booking page.

This is fundamentally not how JavaScript works -- you cannot reference an element of a page that is not loaded. In order to click a button on one page, and have a value change on a different page, you would need to use far more complex methods than are relevant for your skill level.

In the short term, you can simply copy the button onto your dashboard page, and you will see that it works there.