会话存储值显示为空

Question

每次我尝试在部分 B 和 C 中存储值时，我总是得到空值，但对 A 部分工作正常。我似乎无法找到问题所在。我正在尝试根据用户选择的部分在不同的页面上显示用户的信息。例如，如果用户选择 B 部分，我希望在下一页上让用户知道 he/she 已经在 B 部分订购了一个座位，以及可用座位的名称和价格。在下一页显示登机牌后，我希望数组从 5 个座位更改为 4 个，并在每次有新人注册时更新此数组。

index.html

<!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>Document</title>
    <script src = "airplane.js"></script>
</head>
<style>
   
    
</style>
<body>

<h1>Welcome To Air France</h1>

<h2>Choose your seat section here</h2>

<h3>Section A</h3>
<p>Price:</p>
<div id = "Section1Price"></div>
<div id = "Section1"></div>
<form action = "bookingPage.html" method="post">
    <p>Enter your full name to book in this section:</p>
    <input id="clientNameA" type="text" size="25" height="25">
    <input id = "bookSeatA" type="button" onclick="location.href='bookingPage.html';" value="Book a Seat in Section A" />
</form>


<h3>Section B</h3>
<p>Price:</p>
<div id = "Section2Price"></div>
<div id = "Section2"></div>
<form action = "bookingPage.html" method="post">
    <p>Enter your full name to book in this section:</p>
    <input id="clientNameB" type="text" size="25" height="25">

    <input id = "bookSeatB" type = "button" onclick="location.href='bookingPage.html';" value = "Book a Seat in Section B">
 </form>

<h3>Section C</h3>
<p>Price:</p>
<div id = "Section3Price"></div>
<div id = "Section3"></div>
<form action = "bookingPage.html" method="post">
    <p>Enter your full name to book in this section:</p>
    <input id="clientNameC" type="text" size="25" height="25">
    <input id = "bookSeatC" type = "button" onclick="location.href='bookingPage.html';" value = "Book a Seat in Section C">
 </form>
</body>
</html>

airplane.js

function start()
{
    var price1;
    price1 = Math.random() * (200 - 100) + 100;
    price1 = price1.toFixed(2);
    var price2 = (Math.random() * (300 - 100) + 100).toFixed(2);
    var price3 = (Math.random() * (300 - 100) + 100).toFixed(2);

    var priceArray = [price1, price2, price3];
    var sectionASeats = [];
    var sectionBSeats = [];
    var sectionCSeats = [];
    
    for (var k = 0; k < 5; k++)
    {
        sectionASeats[k] = 0;
        sectionBSeats[k] = 0;
        sectionCSeats[k] = 0;
    } 

    var buttonA = document.getElementById( "bookSeatA" );
     buttonA.addEventListener( "click", function() {bookSeat(sectionASeats)}, false );
     buttonA.addEventListener("click",function(){handleSubmitA(priceArray[0],sectionASeats,"A")}, false );

     var buttonB = document.getElementById( "bookSeatB" );
     buttonB.addEventListener( "click", function() {bookSeat(sectionBSeats)}, false );
     buttonB.addEventListener("click",function(){handleSubmitB(priceArray[1]),sectionBSeats,"B"}, false );

     var buttonC = document.getElementById( "bookSeatC" );
     buttonC.addEventListener( "click", function() {bookSeat(sectionCSeats)}, false );
     buttonC.addEventListener("click",function(){handleSubmitC(priceArray[2]),sectionCSeats,"C"}, false );
   

    var result1 = "";
    var result2 = "" ;
    var result3 = "" ;

    result1 += checkSection(sectionASeats, "A" );
    result2 += checkSection(sectionBSeats, "B" );
    result3 += checkSection(sectionCSeats, "C" );

    priceArray.sort(function(a,b) {return a-b});

    document.getElementById("Section1Price").innerHTML = "$" + priceArray[0];
    document.getElementById("Section1").innerHTML = result1;
    
    document.getElementById("Section2Price").innerHTML = "$" + priceArray[1];
    document.getElementById("Section2").innerHTML = result2;

    document.getElementById("Section3Price").innerHTML ="$" +  priceArray[2];
    document.getElementById("Section3").innerHTML = result3;
}
function sectionSeatNum (array)
{
    for (var i = 0; i < array.length;i++)
    {
        if (array[i] == 1)
        {
            return i+1;
        }
    }
}

function handleSubmitA(priceForA,array,section)
{
    const name = document.getElementById("clientNameA").value;
    var seatNumber = sectionSeatNum(array);

    sessionStorage.setItem("ARRAY", JSON.stringify(array));
    sessionStorage.setItem("SECTION", section);
    sessionStorage.setItem("SEATNUM", seatNumber);
    
    sessionStorage.setItem("NAME", name);
    sessionStorage.setItem("PRICE", priceForA);
    
    return;
}

function handleSubmitB(priceForB,array,section)
{
    const name = document.getElementById("clientNameB").value;
    var seatNumber = sectionSeatNum(array);

    sessionStorage.setItem("ARRAY", JSON.stringify(array));
    sessionStorage.setItem("SECTION", section);
    sessionStorage.setItem("SEATNUM", seatNumber);
    
    sessionStorage.setItem("NAME", name);
    sessionStorage.setItem("PRICE", priceForB);
    
    return;
}

function handleSubmitC(priceForC,array,section)
{
    const name = document.getElementById("clientNameC").value;
    var seatNumber = sectionSeatNum(array);

    sessionStorage.setItem("ARRAY", JSON.stringify(array));
    sessionStorage.setItem("SECTION", section);
    sessionStorage.setItem("SEATNUM", seatNumber);
    
    sessionStorage.setItem("NAME", name);
    sessionStorage.setItem("PRICE", priceForC);
    
    return;
}

function bookSeat(array)
{
    for(var i = 0; i < array.length; i++)
    {
        if(array[i] == 0)
        {
            array[i] = 1;
            break;
        }
    }
}

function checkSection(array, section)
{
    var result;
    var check = true;
    var emptyCounter = 0;
    var takenCounter = 0;
    for (var i = 0;i<array.length;i++)
    {
        if(array[i] == 0)
        {
            emptyCounter++;
        }
        else{
            takenCounter++;
        }
    }

    if(takenCounter == array.length)
    {
        check = false;
        result = "<p>There are no seats available in Section " + section + ".</p>";
    }
    else{
        check = true;
        result = "<p>There are " + emptyCounter + " seats available in Section " + section + ".</p>";
    }
    return result;
}
window.addEventListener("load", start,false);

bookingPage.html

<!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>Document</title>
    <script src = "booking.js"></script>
</head>
<body>
    <h1>Thank you for choosing Air France</h1>
    <h2>Here is your boarding pass</h2>
    <h3 id="booking-name"></h3>

    <form action="index.html" method="get">
        <input id = "backToHome" type="button" onclick="location.href='index.html';" value="Return to Homepage">
    </form>
    
</body>
</html>

booking.js

function start()
{
    const name = sessionStorage.getItem("NAME");
    const price = sessionStorage.getItem("PRICE");
    const arrayBookings = JSON.parse(sessionStorage.getItem("ARRAY"));
    const section = sessionStorage.getItem("SECTION");
    var seatNum = sessionStorage.getItem("SEATNUM")

    var result = "";

    result += "<p> Thank you " +name+ " for flying with us. Here is your boarding pass.</p>";
    result += "<p> Name:  " + name + "</p>";
    result += "<p> Section: "+ section + "</p>";
    result +=  "Price: $"+price;
    result += "<p>Seat number: "+seatNum+ "</p>";
   // result += "<p>"+arrayBookings+"</p>";

    document.getElementById("booking-name").innerHTML = result;
}

window.addEventListener("load", start, false);

Answer 1

这里有错字

buttonB.addEventListener("click",function(){handleSubmitB(priceArray[1]),sectionBSeats,"B"}, false );

当你想要的时候

buttonB.addEventListener("click",function(){handleSubmitB(priceArray[1],sectionBSeats,"B")}, false );

会话 C 是同样的错误。

会话存储值显示为空

Session storage value showing null

html

javascript

forms

session

local-storage