如何從另一個頁面上的點擊處理程式更新頁面？-有解無憂

我有一個 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

uj5u.com熱心網友回復：

您正在嘗試使用 JS 代碼修改網站的其他頁面，這是不可能的。當您單擊預訂頁面上的按鈕時，document.getElementById("bstatus")將回傳一個空值，因為在預訂頁面上沒有 ID 為“bstatus”的元素。

這根本不是 JavaScript 的作業方式——您不能參考未加載的頁面元素。為了單擊一個頁面上的按鈕，并在不同的頁面上更改值，您需要使用比與您的技能水平相關的更復雜的方法。

在短期內，您只需將按鈕復制到儀表板頁面上，您就會看到它在那里作業。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447910.html

標籤：javascript html 功能点击

上一篇：為什么盒子會在盒子里面向下移動？

下一篇：如何將浮動標簽添加到文本區域？