I have put together what I believe my homework assignment is asking me to do, but I can't get the form to add the vehicle information. Here is the code. Can someone help me get onto the correct path? Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>
        Automobile
    </title>
</head>

<body>
<h2>Automobile</h2>   
    <script type="text/javascript">
    /*
    Shane Faulkwell
    FA4241307
    CST140
    PROGRAMMING IN JAVASCRIPT
    Programming Assignment 4
    */  
    <!--HIDE FROM INCOMPATIBLE BROWSERS
        function Vehicle() {
            this.make = make;
            this.model = model;
            this.year = year;
            this.color = color;
            this.engine = engine;
            this.drive = drive;
            this.getVehicle = getVehicleInfo;
            this.updateVehicle = updateSelectedVehicle;
        }

        var vehicleList = new Vehicle();    
            document.write("<p>Make: " + vehicleList.make);
            document.write("<br />Model: " + vehicleList.model);
            document.write("<br />Year: " + vehicleList.year);
            document.write("<br />Color: " + vehicleList.color);
            document.write("<br />Engine: " + vehicleList.engine);
            document.write("<br />Drive: " + vehicleList.drive + "</p>")

        function addVehicle() {
            if (document.forms[3].make.value == ""
                || document.forms[3].model.value == "")
                window.alert("You must enter the vehicle&#39;s make and model.");
            else {
                if (document.forms[3].vehicle.options[0].value == "vehicle")
                    document.forms[3].vehicle.options[0] = null;
                var newVehicle = vehicleList.length;
                vehicleList[newVehicle] = new Vehicle();
                vehicleList[newVehicle].make
                    = document.forms[3].make.value;
                vehicleList[newVehicle].model
                    = document.forms[3].model.value;
                vehicleList[newVehicle].year
                    = document.forms[3].year.value;
                vehicleList[newVehicle].color
                    = document.forms[3].color.value;
                vehicleList[newVehicle].engine
                    = document.forms[3].engine.value;
                vehicleList[newVehicle].drive
                    = document.forms[3].drive.value;
                var createVehicle = new Option();
                createVehicle.value = vehicleList[newVehicle].make 
                + ", " + vehicleList[newVehicle].model;
                createVehicle.text = vehicleList[newVehicle].make
                + ", " + vehicleList[newVehicle].model;
                var numVehicle
                    = document.forms[3].vehicle.options.length;
                    document.forms[3].vehicle.options[numVehicle] = createVehicle;
            }
        }
            function getVehicleInfo() {
                document.forms[3].make.value = this.make;
                document.forms[3].model.value = this.model;
                document.forms[3].year.value = this.year;
                document.forms[3].color.value = this.color;
                document.forms[3].engine.value = this.engine;
                document.forms[3].drive.value = this.drive;
            }
            function updateSelectedVehicle(curIndex) {
                this.make = document.forms[3].make.value;
                this.model = document.forms[3].model.value;
                this.year = document.forms[3].year.value;
                this.color = document.forms[3].color.value;
                this.engine = document.forms[3].engine.value;
                this.drive = document.forms[3].drive.value;
                document.forms[3].vehicle.options[curIndex].value
                    = this.make + ", " + this.model;
                document.forms[3].vehicle.options[curIndex].text
                    = this.make + ", " + this.model;
                window.alert("Vehicle information updated.");
            }
            function deleteVehicle() {
                var selectedVehicle = 0;
                var vehicleSelected = false;

                while (selectedVehicle < document.forms[3].vehicle.length) {
                    if (document.forms[3].vehicle.options[selectedVehicle].selected== true) {
                        vehicleSelected = true;
                        break;
                    }
                ++selectedVehicle;
                }
                if (vehicleSelected == true) {
                    document.forms[3].vehicle.options[selectedVehicle] = null;
                    vehicleList.splice(selectedVehicle, 1;
                }
                else
                    window.alert("You must select a vehicle in the list.");
            }
    // STOP HIDING FROM INCOMPATIBLE BROWSERS -->
    </script>


    <form action="">
        <p><input type="button" value="Add Vehicle" style="width: 150px" onclick="addVehicle()" />
        <input type="button" value="Delete Vehicle" onclick="deleteVehicle()" style="width: 150px" />
        <input type="button" value="Update Vehicle" onclick="vehicleList[document.forms[3].vehicle.selectedIndex]
            .updateVehicle(document.forms[3].vehicle.selectedIndex);" style="width: 150px" />
        </p>
        <table border="0">
            <tr>
                <td><select name="vehicles" size="13" style="width: 250px" 
                    onclick="vehicleList[this.selectedIndex].getVehicle();">
                <option value="vehicles">Vehicles</option></select>
                </td>
                <td>Make<br />
                    <input type="text" name="make" size="20" /><br />
                    Model<br />
                    <input type="text" name="model" size="20" /><br />
                    Year<br />
                    <input type="text" name="year" size="20" /><br />
                    Color<br />
                    <input type="text" name="color" size="20" /><br />
                    Engine<br />
                    <input type="text" name="engine" size="20" /><br />
                    Drive<br />
                    <input type="text" name="drive" size="20" /><br />
                </td>
            </tr>
        </table>
    </form>
</body>

</html>

Recommended Answers

All 3 Replies

Here is the actual assignment. Maybe I am reading too much into what it is asking me.

Create an html document that includes a JavaScript program that creates a new constructor function named Automobile in the document head. Include at least five properties in the object definition, such as make, model, color, engine, seats, and so forth. Then assign the values of your car to each of the Automobile properties. Print the properties to the screen.

That is a very vague assignment and could have many answers but this would be my interpretation of it:

function Automobile(make, model, colour, engine, seats) {
    this.make = make;
    this.model = model;
    this.colour = colour;
    this.engine = engine;
    this.seats = seats;
}

var myCar = new Automobile('Peugeot', '307', 'Blue', '2.6 litre GTi', 5);

document.write('My car is a ' + myCar.colour + ', ' + myCar.make + ' ' + myCar.model + '. It has a ' + myCar.engine + ' engine and ' + myCar.seats + ' seats.');

Thx

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.