Jump to content

html//javascript.

cheekychop

By cheekychop
in HTML Help

 Share

Recommended Posts

cheekychop Newbie

cheekychop

Posted
Posted 

<script language="javascript" type="text/javascript">
            var Orders = new Array();

            var CurrentOrder;

            var TableNumbers = [001, 002, 003];

            function CreateOrder(OrderNum){
                var isValidOrder = false;
                for (var a = 0; a < TableNumbers.length; a++) 
                    isValidOrder = isValidOrder || (TableNumbers[a] == OrderNum);
                CurrentOrder = null;
                if (isValidOrder) {
                    CurrentOrder = {
                        orderID: OrderNum,
                        ItemsOrdered: new Array()
                    };
                    document.getElementById("orderIdField").disabled = "disabled";
                    document.getElementById("setTableNum").disabled = "";
                    document.getElementById("menuItem").disabled = "";
                    document.getElementById("submitItem").disabled = "";
                }
            }

            function OrderItem(Item){
                if (CurrentOrder != null) 
                    if (Item){
                        CurrentOrder.ItemsOrdered.push(Item);
                        document.getElementById("submitOrder").disabled = "";
                    }
            }

            //Function adds the current order to the list of orders so far
            function saveOrder(){
                Orders.push(CurrentOrder);
                document.getElementById("submitOrder").disabled = "disabled";
                document.getElementById("orderIdField").disabled = "";
                document.getElementById("menuItem").disabled = "disabled";
                document.getElementById("submitItem").disabled = "disabled";
                document.getElementById("setTableNum").disabled = "";
            }
        </script>
    </head>
     <body>
Order #:
<input type="text" id="orderIdField" /><input type="button" id="setTableNum" onclick="createOrder(document.getElementById('orderIdField').value);" />
<br />
Items to order:
<select id="menuItems" disabled="disabled">
<option value="1.99">coffee</option>
<option value=".50">toast</option> //etc
</select>
// having problems here.
Save Order:
<input type="button" disabled="disabled" id="submitItem" onclick="orderItem({name:document.getElementById('menuItems').selectedItem.innerText, price:document.getElementById('menuItems').selectedItem.value});" /><br />
<input type="button" id="submitOrder" onclick="saveOrder()" />
</body>
</html>

 

 

 

Hi

For an assignment i have to make a food ordering system, but im having problems completing it.

 

Could someone point out my error.. as i cant order anything. Is this the best way to create the system? or can someone tell me a more logical way of making it?

 

cheers.

Link to comment
Share on other sites
  • 2 weeks later...
haku Regular Member

haku

Posted
Posted 

[code]

The output will be nothing - the function called isn't the same function that has been declared in the head (hint: check the capital letters - javascript is case sensitive).

 

As for how to structure your document, well one thing you can do is make all the javascript external. You can put it in an entirely separate file to keep it separate from your html, which makes your code easier to read.

 

This is how you do it. First I'm going to pull out your HTML that you have already shown. I'm going to remove the javascript only, and leave the html as is:

</head>
     <body>
Order #:
<input type="text" id="orderIdField" /><input type="button" id="setTableNum" />
<br />
Items to order:
<select id="menuItems" disabled="disabled">
<option value="1.99">coffee</option>
<option value=".50">toast</option> //etc
</select>
// having problems here.
Save Order:
<input type="button" disabled="disabled" id="submitItem" /><br />
<input type="button" id="submitOrder" />
</body>
</html>

 

There are three elements I removed javascript from:

 

1) input: type="button" id="setTableNum"

javascript : onclick="createOrder(document.getElementById('orderIdField').value);

2) input: type="button" disabled="disabled" id="submitItem"

javascript: onclick="orderItem({name:document.getElementById('menuItems').selectedItem.innerText, price:document.getElementById('menuItems').selectedItem.value});

3) input: type="button" id="submitOrder"

javascript: onclick="saveOrder()

 

These all need to be taken care of first. All three of them are functions to be executed onclick. So you need to set functions to wait or 'listen' for the click. First you target the element, then set an onclick function:

 

function setTableNum()
{
   // first find the target element. In this case it is the input with an id of setTableNum
   var targetInput = document.getElementById("setTableNum");
   // next set the listener to wait for that input to be clicked
   targetInput.onclick = function()
   {
      // in here write the name of the function that you want to call.
      // in this case its the function you were calling in the onclick function
      createOrder(document.getElementById('orderIdField').value)
   }
}

 

Repeat the process for the other two input elements. First, use document.getElementById to find the target, then set a function on click that will execute when the button is clicked.

 

Next, you have to execute these functions or else they won't be listening for the button click when the button is clicked. If you try to load the above function before the button it is attached to is loaded, then it wont work. So you set a function that runs once the page has been loaded.

 

// To execture the listener functions, you need to have them execute when the window is loaded
window.onload = function()
{
   // the code in here is executed once the page has loaded.
   // setTableNum is the name of the function I defined above
   setTableNum()
}

 

Add the names of the other two functions for the other two buttons into the above code. Next we add actual javascript functions to the file.

 

var Orders = new Array();

            var CurrentOrder;

            var TableNumbers = [001, 002, 003];

            function CreateOrder(OrderNum){
                var isValidOrder = false;
                for (var a = 0; a < TableNumbers.length; a++) 
                    isValidOrder = isValidOrder || (TableNumbers[a] == OrderNum);
                CurrentOrder = null;
                if (isValidOrder) {
                    CurrentOrder = {
                        orderID: OrderNum,
                        ItemsOrdered: new Array()
                    };
                    document.getElementById("orderIdField").disabled = "disabled";
                    document.getElementById("setTableNum").disabled = "";
                    document.getElementById("menuItem").disabled = "";
                    document.getElementById("submitItem").disabled = "";
                }
            }

            function OrderItem(Item){
                if (CurrentOrder != null) 
                    if (Item){
                        CurrentOrder.ItemsOrdered.push(Item);
                        document.getElementById("submitOrder").disabled = "";
                    }
            }

            //Function adds the current order to the list of orders so far
            function saveOrder(){
                Orders.push(CurrentOrder);
                document.getElementById("submitOrder").disabled = "disabled";
                document.getElementById("orderIdField").disabled = "";
                document.getElementById("menuItem").disabled = "disabled";
                document.getElementById("submitItem").disabled = "disabled";
                document.getElementById("setTableNum").disabled = "";
            }

 

When you put the three pieces of code together, the most important thing is that the window.onload function is at the bottom, so that all the other code has been loaded before it. So your javascript file altogether (minus the two examples I didn't show) will look like this:

 

var Orders = new Array();

      var CurrentOrder;
      var TableNumbers = [001, 002, 003];

            function CreateOrder(OrderNum){
                var isValidOrder = false;
                for (var a = 0; a < TableNumbers.length; a++) 
                    isValidOrder = isValidOrder || (TableNumbers[a] == OrderNum);
                CurrentOrder = null;
                if (isValidOrder) {
                    CurrentOrder = {
                        orderID: OrderNum,
                        ItemsOrdered: new Array()
                    };
                    document.getElementById("orderIdField").disabled = "disabled";
                    document.getElementById("setTableNum").disabled = "";
                    document.getElementById("menuItem").disabled = "";
                    document.getElementById("submitItem").disabled = "";
                }
            }

            function OrderItem(Item){
                if (CurrentOrder != null) 
                    if (Item){
                        CurrentOrder.ItemsOrdered.push(Item);
                        document.getElementById("submitOrder").disabled = "";
                    }
            }

            //Function adds the current order to the list of orders so far
            function saveOrder(){
                Orders.push(CurrentOrder);
                document.getElementById("submitOrder").disabled = "disabled";
                document.getElementById("orderIdField").disabled = "";
                document.getElementById("menuItem").disabled = "disabled";
                document.getElementById("submitItem").disabled = "disabled";
                document.getElementById("setTableNum").disabled = "";
            }
// To execture the listener functions, you need to have them execute when the window is loaded
window.onload = function()
{
   // the code in here is executed once the page has loaded.
   // setTableNum is the name of the function I defined above
   setTableNum()
}

 

And your HTML is at the top. You now have two entirely separate files for the HTML and the javascript. But you have to link them together. To do that, we link the javascript to the html document in the head using this code:

 

<html>
   <head>
      <script type="text/javascript" src="path/to/javascript.js"></script>

  </head>

</html>[/code]

 

In this way you have a separation of content and function. If CSS is also kept in an external document, this leaves you with everything properly separated and well organized.

 

Edit: my head tags and stuff screwed this page all up!

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.