如何从另一个页面上的点击处理程序更新页面？

Question

我在 HTML 和 CSS & JS 中有一个“航班预订系统”。但问题是，当人们预订航班时，它应该更新他们仪表板中的文本，但它根本行不通。我按钮的“onclick 函数”没有连接到 JS 函数。请帮忙？

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 class="sidenav">
        <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 class="sidenav">
        <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")
    }

当我点击“fsumbit”时，它应该将“bstatus”更改为“1 Booking”。它只是不起作用。我的 JS 已连接到我的页面，因为当我在函数之外执行 JS 命令时，它可能会起作用。我正在使用基本的 JS 和代码。

这是我的 github 代表： https://github.com/samykcodes/sbsystem

任何我的网站： samsbookingsystem.netlify.app

Answer 1

您正在尝试使用 JS 代码修改网站的其他页面，这是不可能的。当您单击预订页面上的按钮时，document.getElementById("bstatus") 将变为 return 空值，因为在预订页面上没有 ID 为 'bstatus' 的元素。

这根本不是 JavaScript 的工作方式 -- 您不能引用未加载的页面元素。为了在一个页面上单击一个按钮并在另一个页面上更改值，您需要使用比与您的技能水平相关的方法复杂得多的方法。

短期内，您只需将按钮复制到仪表板页面，您就会看到它在那里起作用。

如何从另一个页面上的点击处理程序更新页面？

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

html

javascript

function

onclick