/    Sign up×
Community /Pin to ProfileBookmark

Box no working/Custom JavasScript Objects

I cannot add passengers and the select date calendar box is not popping up when click in the box.
Does anyone see my error in the script?

/* JavaScript 6th Edition
*
Chapter 7
* Chapter case

  • *

    Outer Orbits


  • *

    Author:


  • *

    Date

  • *

    Filename: orbits.js
    */
    “use strict”; // interpret contents in JavaScript strict mode
    var dateObject = new Date();
    function displayCalendar(whichMonth) {
    var ticket = {
    passengersOnTicket: 0,
    passengers: {},
    calcCost: updateTotalCost
    };
    var countdown;
    var date;
    var dateToday = new Date ();
    var daysOfWeek;
    var daysInMonth;
    var dateCells;
    var captionValue;
    var month;
    var year;
    var monthArray = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “Decemeber”];
    if (whichMonth === -1) {
    dateObject.setMonth(dateObject.getMonth() -1);
    } else if (whichMonth === 1) {
    dateObject.setMonth(dateObject.getMonth()+ 1);
    }
    month = dateObject.getMonth();
    year = dateObject.getFullYear();
    dateObject.setDate(1);
    daysOfWeek = dateObject.getDay();
    captionValue = monthArray[month] + ” ” + year;
    document.querySelector(“#cal table caption”).innerHTML = captionValue;
    if (month === 0 || month === 2 || month === 4 || month === 6 || month === 7 || month === 9 || month === 11) { // Jan, Mar, May, Jul, Aug, Oct, Dec
    daysInMonth = 31;
    } else if (month === 1) { // Feb
    if (year % 4 === 0){ // leap year test}
    if (year % 100 === 0){
    // year ending in 00 not a leap year unless
    // divisible by 400
    if (year % 400 === 0) {
    daysInMonth = 29;
    } else {
    daysInMonth = 28;
    }
    } else {
    daysInMonth = 29;
    }
    } else {
    daysInMonth = 28;
    }
    } else { // Apr, Jun, Sep, Nov
    daysInMonth = 30;
    }
    dateCells = document.getElementsByTagName(“td”);
    for (var i = 0; i < dateCells.length; i++) {
    // clear existing table dates
    dateCells[i].innerHTML = “”;
    dateCells[i].className = “”;
    }
    for (var i = daysOfWeek; i < daysInMonth + daysOfWeek; i++) {
    // add dates to days cells
    dateCells[i].innerHTML = dateObject.getDate();
    dateCells[i].className = “date”;
    if (dateToday < dateObject) {
    dateCells[i].className = “futuredate”;
    }
    date = dateObject.getDate() + 1;
    dateObject.setDate(date);
    dateObject.setMonth(dateObject.getMonth() – 1);
    //reset month to month shown
    document.getElementById(“cal”).style.display = “block”;
    // display calendar if it’s not already visible
    function selectDate(event) {
    if (event === undefined) { // get caller element in IE8}
    event = window.event;}
    hideCalender();
    }
    var callerElement = event.target || event.src.Element;
    if (callerElement.innerHTML === “”) {
    // cell contains no date, so don’t close the calendar
    document.getElementById(“cal”).style.display = “block”;
    return false;
    }
    dateObject.setDate(callerElement.innterHTML);
    var fullDateToday = new Date ();
    var dateToday = Date.UTC(fullDateToday.getFullYear(), fullDateToday.getMonth(), fullDateToday.getDate());
    var selectedDate = Date.UTC(dateObject.getFullYear()), dateObject.getMonth(), dateObject.getDate());
    if (selectedDate <= dateToday) {
    document.getElementById(“cal”),style.display = “block”;
    return false
    }
    document.getElementById(“tripDate”).value = dateObject.toLocaleString();
    countdown – setInterval(updateCountdown, 1000);
    document.getElementById(“countdownSection”).style.display = “block”;
    ticket.date = dateObject.toLocaleString();
    document.getElementById(“selectedDate”).innerHTML = ticket.date;
    doucment.getElementById(“dateSection”).style.display = “block”;
    }
    function createEventListeners() {
    var dateField = document.getElementById(“tripdate”);
    if (dateField.addEventListener) {
    dateField.addEventListener(“click”, displayCalendar, false);
    } else if (dateField.attachEvent) {
    dateField.attachEvent(“onclick”, displayCalendar);
    if (window.addEventListener) {
    window.addEventListener(“load”, createEventListeners, false);
    } else if (window.attachEvent) {
    window.attachEvent(“onload”, createEventListeners);
    var dateCells = document.getElementsByTagName(“td”);
    if (dateCells[0].addEventListener) {
    for (var i = 0; i < dateCells.length; i++) {
    dateCells[i].addEventListener(“click”, selectDate, false);
    }
    } else if (dateCells[0].attachEvent) {
    for (var i = 0; i < dateCells.length; i++) {
    dateCells[i].attachEvent(“onclick”, selectDate);
    var closeButton = document.getElementById(“close”);
    if (closeButton.addEventListener) {
    closeButton.addEventListener(“click”, hideCalender, false);
    } else if (closeButton.attachEvent) {
    closeButton.attachEvent(“onclick”, hideCalender);
    }
    var prevLink = document.getElementById(“prev”);
    var nextLink = document.getElementById(“next”);
    if (prevLink.addEventListener) {
    prevLink.addEventListener(“click”, prevMo, false);
    nextLink.addEventListener(“click”, nextMo, false);
    } else if (prevLink.attachEvent) {
    prevLink.attachEvent(“onclick”, prevMo);
    nextLink.attachEvent(“onclick”, nextMo);
    }
    var nameButton = document.getElementById(“addName”);
    if (nameButton.addEventListener) {
    nameButton.addEventListener(“click”, registerName, false);
    } else if (nameButton.attachEvent) {
    nameButton.attachEvent(“onclick”, registerName);
    }
    function hideCalender() {
    document.getElementById(“cal”).style.display = “none”;
    }
    function prevMo() {
    displayCalendar(-1);
    }
    function nextMo() {
    displayCalendar(1);
    }
    function updateTotalCost() {
    var totalCost = this.passengersOnTicket + 250000;
    var monthlyCost = totalCost / 60;
    var shortMonthlyCost = monthlyCost.toFixed(0);
    document.getElementById(“singleLabel”).innerHTML = “single payment of $” + totalCost.toLocaleString();
    document.getElementById(“multipleLabel”).innerHTML = “60 monthly payments of $” + shortMonthlyCost.toLocaleString();
    }
    function updateCountdown (){
    var dateToday = new Date();
    var dateFrom = Date.UTC(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate(), dateToday.getHours(), dateToday.getMinutes(), dateToday.getSeconds());
    var dateTo = Date.UTC(dateObject.getFullYear(), dateObject.getMonth(), dateObject.getDate(), 19, 0, 0); // all launches at 8:00pm UTC
    if ((dateTo – dateFrom < 1000) { // time will be less than 0 when setInterval runs next
    clearInterval(countdown);
    document.getElementById(“countdownSection”).style. display = “none”;
    }
    }
    //days
    var daysUntil = Math.floor((dateTo – dateForm) / 86400000)
    document.getElementById(“countdown”).innterHTML = daysUntil;
    // hours
    var fractionalDay = (dateTo – dateFrom) % 86400000;
    var hoursUntil = Math.floor(fractionalDay / 3600000);
    if (hoursUntil < 10) {
    hoursUntil = “0 “+ hoursUntil;
    }
    document.getElementById(“countdown”).innterHTML += “:” + hoursUntil;
    // minutes
    var fractionalHour = fractionalDay % 3600000;
    var minutesUntil = Math.floor(fractionalHour / 60000);
    if (minutesUntil < 10) {
    minutesUntil = “0”+ minutesUntil;
    }
    document.getElementById(“countdown”).innterHTML += “:” + minutesUntil;
    // seconds
    var fractionalMinute = fractionalHour % 6000;
    var secondsUntil = Math.floor(fractionalMinute / 1000);
    if (secondsUntil < 10) {
    secondsUntil = “0” + secondsUntil;
    }
    document.getElementById(“countdown”).innterHTML += “:” + secondsUntil;
    function registerName() {
    var passengerList = document.getElementById(“passengers”);
    var passengerName = doucment.createElement(“li”);
    var newFnameProp;
    var newLnameProp;
    ticket.passengersOnTicket += 1;
    newFnameProp = “fname” + ticket.passengersOnTicket;
    newLnameProp = “lname” + ticket.passengersOnTicket;
    ticket.calcCost ();
    //add first+last name to ticket object as new properties
    ticket.passengers[newFnameProp] = document.getElementById(“fName”).value;
    ticket.passengers[newLnameProp] = document.getElementById(“lName”).value;
    // add entered name to passenger list in ticket section
    passengerName.innerHTML = ticket.passengers[newFnameProp] + “” + ticket.passengers[newLnameProp];
    passengerList.appendChild(passengerName);
    // clear first and last names from form
    document.getElementById(“fname”).value = “”;
    document.getElementById(“lName”).value = “”;
    //display ticket and passengers section
    document.getElementById(“ticket”).style.display = “block”;
    document.getElementById(“passengersSection”).style.display = “block”;
    // return focus to First Name field to facilitate entry of
    // another passenger name
    document.getElementById(“fName”).focus();
    }

  • to post a comment
    JavaScript

    4 Comments(s)

    Copy linkTweet thisAlerts:
    @JMRKERDec 10.2015 — What kind of errors are you getting when you look at the error console?

    Do you really expect us to re-create the HTML associated with the JS if we don't have the book?

    BTW, you should put your code between [ code] and [ /code] OR [ php] and [ /php] tags (without the spaces)

    to make it easier to read your script and retain the formatting indentations.
    Copy linkTweet thisAlerts:
    @mschneider331authorDec 10.2015 — sorry below is the HTML associated with the JS

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <!--

    JavaScript 6th Edition

    Chapter 7

    Chapter case

    Outer Orbits booking page
    Author: Shaheen Schneider
    Date: October 20 2015

    Filename: booktrip.htm

    -->

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Outer Orbits - Reserve Your Seat</title>

    <link rel="stylesheet" media="screen and (max-device-width: 999px)" href="orbitshh.css" />

    <link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="orbits.css" />

    <!--[if lt IE 9]>

    <link rel="stylesheet" href="orbits.css" />

    <![endif]-->

    <link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Racing+Sans+One' rel='stylesheet' type='text/css'>

    <script src="modernizr.custom.65897.js"></script>

    </head>

    <body>

    <header>

    <h1>

    <img src="images/orbits.png" width="98" height="116" alt="Outer Orbits" title="" />

    Outer Orbits

    </h1>

    <p>space excursions <span>&#10022;</span></p>

    </header>

    <nav>

    <ul>

    <li><a href="#">About Us</a></li>

    <li><a href="#">Trips</a></li>

    <li><a href="#">FAQ</a></li>

    <li class="currentPage"><a href="#">Reservations</a></li>

    <li><a href="#">Simulator</a></li>

    <li><a href="#">Contact</a></li>

    </ul>

    </nav>

    <article>

    <h2>Book Your Ticket</h2>

    <section id="ticket">

    <h3>Ticket Details</h3>

    <div id="passengersSection">

    <h4>Passengers</h4>

    <ul id="passengers"></ul>

    </div>

    <div id="dateSection">

    <h4>Date</h4>

    <p id="selectedDate"></p>

    </div>

    <div id="countdownSection">

    <h4>Countdown to launch</h4>

    <p id="countdown"></p>

    </div>

    </section>

    <form>

    <fieldset class="text">

    <legend>Add Passengers</legend>

    <label for="fname">First Name</label>

    <input type="text" id="fname" />

    <label for="lname">Last Name</label>

    <input type="text" id="lname" />

    <input type="button" value="Add" id="addName" />

    </fieldset>

    <fieldset>

    <legend>Pick a date</legend>

    <input type="text" id="tripDate" />

    </fieldset>

    <fieldset class="checks">

    <legend>Choose a payment method</legend>

    <input type="radio" id="single" name="Payment" />

    <label for="single" id="singleLabel">Single payment</label>

    <input type="radio" id="multiple" name="Payment" />

    <label for="multiple" id="multipleLabel">60 monthly payments</label>

    </fieldset>

    </form>

    <div id="cal">

    <div id="prev">&lt; previous</div>

    <div id="next">next &gt;</div>

    <table>

    <caption></caption>

    <tr>

    <th>Sun</th>

    <th>Mon</th>

    <th>Tue</th>

    <th>Wed</th>

    <th>Thu</th>

    <th>Fri</th>

    <th>Sat</th>

    </tr>

    <tr>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    </tr>

    <tr>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    </tr>

    <tr>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    </tr>

    <tr>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    </tr>

    <tr>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    </tr>

    <tr>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    </tr>

    </table>

    <p id="close">close <span>&#9746;</span></p>

    </div>

    </article>

    <footer><p>Outer Orbits Space Excursions <span>&#10022;</span> Virginia Beach, VA</p></footer>

    <script src="orbits.js"></script>

    </body>

    </htm
    Copy linkTweet thisAlerts:
    @JMRKERDec 10.2015 — Best I can tell, you have a missing '}' character somewhere in your event creation logic

    but it is very difficult to tell as you have no indentation in your code.

    If you don't provide the URL where the CSS and images are located,

    then don't bother to include them in the test code you post to the forum.

    Your calendar creation seems to have a problem as there is no display.

    Probably due to the multi-level tables and logic you seem to be setting up.

    Break you code down into smaller parts and solve one problem at a time.

    For example, get your calendar display working without any event changes.

    Once that is functional, then add you event logic.

    [SIZE=4][COLOR="#FF0000"]Again, you should put your code between [ code] and [ /code] OR [ php] and [ /php] tags (without the spaces) to make it easier to read your script and retain the formatting indentations. [/COLOR][/SIZE]

    You can modify your previous posts to spot any other errors easier.
    Copy linkTweet thisAlerts:
    @benmartin101Dec 10.2015 — There's definitely many missing brackets in your javascript code. You can put your code here so you can see where you are missing them:

    http://jsbeautifier.org/
    ×

    Success!

    Help @mschneider331 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...