Question

我是JavaScript和HTML的新手，并且正在尝试制作一个转售预订应用程序，该应用程序收集所需的信息并将其显示在同一页面的表格中。我一直在努力尝试数小时，以使其可用于各种方法，但我感觉情况越来越糟。我可能犯了一些愚蠢的错误，但是我似乎无法弄清要使其生效所需的更改。

这是我的HTML：

   <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="UTF-8">
        <title>White Noise Studios - Home</title>
        <script type="text/javascript" src="Homepage.js"></script>
    <style>
        body, html
        {
            height: 100%;
            background: url(Media/background.png);
            background-size: cover;
        }

    </style>
</head>
<body>
<header style="color:white;font-family:'Calibri'">
    <h1> Rehearsal Bookings</h1>
    <p>Please let us know what gear you require in order for us to have the room ready for you. Leave the equipment section blank if you wish to bring your own gear. </p>
</header>
<form name="booking" id="booking">
<table style="color:white;font-family:'Yu Gothic UI Semibold'">
    <tr>
        <td><form action="Homepage.html"><input type="image" src="Media/homebutton.png"></form></td>
        <td><form action="Homepage.html"><input type="submit" value="Book My Rehearsal"></form></td>

        <td>Artist Name:</td><td><input type="text" name="Artist" size="50" id="Artist" /></td>
        <td>Contact Number:</td><td><input type="text" name="Contact" size="50" id="Contact" /></td>

    </tr>
        <td>Equipment Needed:</td>
        <td><label>Microphone</label>
        <select id = "Microphone" name="Microphone">
            <option value = "0">0</option>
            <option value = "1">1</option>
            <option value = "2">2</option>
            <option value = "3">3</option>
        </select></td>
        <td><label>Guitars</label>
            <select id = "Guitar" name="Guitar">
                <option value = "0">0</option>
                <option value = "1">1</option>
                <option value = "2">2</option>
                <option value = "3">3</option>
            </select></td>
        <td><label>Bass</label>
            <select id = "Bass" name="Bass">
                <option value = "0">0</option>
                <option value = "1">1</option>
                <option value = "2">2</option>

            </select></td>
        <td><label>Drums</label>
            <select id = "Drums" name="Drums">
                <option value = "0">None</option>
                <option value = "1">Mapex Mars 5 Piece Full Kit</option>
                <option value = "2">Ludwig LC17611 5 Piece Acoustic Kit</option>
                <option value = "3">Roland TD 25KV V-Drums Kit</option>
            </select></td>
        <td><label>Amp</label>
            <select id = "Amp" name="Amp">
                <option value = "0">None</option>
                <option value = "1">Marshall DSL100H</option>
                <option value = "2">Marshall MG100GFX</option>
                <option value = "3">Mesa Boogie triple Rectifier 100w</option>
            </select></td>    </tr>

    <tr>
        <td>Date:</td><td><input type="date" name="Date"  id="Date" /></td>
    </tr>
    <tr>
        <td>Time:</td><td><input type="time" name="Time" id="Time"  /></td>
    </tr>
</table>

</form>
<input type="submit" name="Book" value="Book my Rehearsal">

<button id="cancel" name="Cancel" onclick="myFunction()" value="Reset form">Cancel</button>

<hr/>
<div id="table">
</div>
<body>
<body style=”font-family:”arial black”; >

还有我的JavaScript：

var ArtistField, ContactField, MicrophoneSelect, GuitarSelect, BassSelect, DrumsSelect, AmpSelect, DateSelect, TimeSelect, BookSelect, CancelSelect;


var Booking = function (Artist, Contact, Microphone, Guitar, Bass, Drums, Amp, Date, Time ) {
    this.Artist = Artist;
    this.Contact  = Contact;
    this.Microphone = Microphone;
    this.Guitar = Guitar;
    this.Bass = Bass;
    this.Drums = Drums;
    this.Amp = Amp;
    this.Date = new Date ;
    this.Time = Time;
};

function myFunction() {
    document.getElementById("booking").reset();
}

var Bookings = []

Booking.prototype.tableRow = function(){
    var tr = "<tr><td>" + this.Artist + "</td><td>" +
        this.Contact + "</td><td>" + this.Microphone +
        "<tr><td>" + this.Guitar + "<tr><td>" + this.Bass + "<tr><td>" + this.Drums + "<tr><td>" + this.Amp +"<tr><td>"
        + this.getDate() + "</td><td>" + this.Time+ "</td><td>" + "</td></tr> ";
    return tr;
};

Booking.prototype.getDate = function(){
    return this.Date.toDateString();
};

var clickBook = function() {
    addbooking(ArtistField, ContactField, MicrophoneSelect, GuitarSelect, BassSelect, DrumsSelect, AmpSelect, DateSelect, TimeSelect,);
    showTable();
};

var showTable = function(){
    var tableDiv = document.getElementById("table"), table = "<table border='1'>" +
        "<thead><th>Artist</th><th>Contact</th><th>Microphone</th><th>Guitar</th><th>Bass</th><th>Drums</th><th>Amp</th</thead>";
    for(var i=0, j=Bookings.length; i<j; i++){
        var appt = Bookings[i];
        table += appt.tableRow();
    }
    table+="</table>";
    tableDiv.innerHTML = table;
};

window.onload = function(){
    ArtistField = document.getElementById("Artist");
    ContactField = document.getElementById("Contact");
    MicrophoneSelect = document.getElementById("Microphone");
    GuitarSelect = document.getElementById("Guitar");
    BassSelect = document.getElementById("Bass");
    DrumsSelect = document.getElementById("Drums");
    AmpSelect = document.getElementById("Amp");
    DateSelect = document.getElementById("Date");
    TimeSelect = document.getElementById("Time");
    //var roleChoice = roleField.options[roleField.selectedIndex].text;


    Book = document.getElementById("Book");
    Book.onclick = clickBook();
    showTable();
};

将输入数据保存到同一页面上的表？ HTML和Javascript

0 个答案: