The bottom of the menu has a list of specials. You can see that the CSS for those lines is set to highlight the lines if the mouse moves over them. Why not, if a special is clicked, automatically select the items in the menu that correspond to that special?
The first thing we’ll need is a function that can check the radio button in a specified group, according to a desired value.
function markSpecial(radioGroup, special) {
var form = document.forms.menu;
var buttons = form[radioGroup];
for (var button=0;button<buttons.length;button++) {
if (buttons[button].value == special) {
buttons[button].checked = true;
return;
}
}
}
Test this:
javascript:markSpecial("sides", "eggsalad");
javascript:markSpecial("sides", "slaw");
javascript:markSpecial("dishes", "burger");
If the function is working, you should see the appropriate radio button get selected each time you use that function in the URL bar.
A special, however, has three items. It will be easier to mark the specials if we can call one function that, in turn, calls markSpecial for each of the three choices.
function special(drink, side, meat) {
markSpecial('drinks', drink);
markSpecial('sides', side);
markSpecial('dishes', meat);
}
This function takes three strings: the drink code, the side code, and the dish code. Try it:
javascript:special("sling", "potatosalad", "rib");
javascript:special("water", "eggsalad", "chicken");
Now all we need to do is add an onclick to the specials <li> tags.
<li onclick="special('roy', 'eggsalad', 'burger');">Rob Roy, egg salad, and a steakburger.</li>
<li onclick="special('margarita', 'slaw', 'chicken');">Margarita, Coleslaw, and roasted chicken.</li>
You should now be able to click on each special to mark the menu for those orders. Go ahead and make up some more specials. All you need to do is copy the lines that are already there, and change the text and function call.
Related Pages
