AJAX | JavaScript | HTML | PHP Answers

AJAX | JavaScript | HTML | PHP

I am making a restaurant menu but just can't seem to figure it out.
Here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body>
<div class="page">
<div class="topbar">
Menu
</div>
<div class="row">


<div class="cell">
<input type="checkbox" name="chkBurgers" id="chkBurgers" /><label for="chkBurgers">Burgers</label>
</div>


<div class="cell" id="divBurgers" style="visibility:hidden;">
<input type="radio" name="radBurgers" id="radBurgerRegular" /><label for="radBurgerRegular">Regular (4.19)</label><br />
<input type="radio" name="radBurgers" id="radBurgerCheese" /><label for="radBurgerCheese">w/ Cheese (4.79)</label><br />
<input type="radio" name="radBurgers" id="radBurgerBacon" /><label for="radBurgerBacon">w/ Bacon (4.79)</label><br />
<input type="radio" name="radBurgers" id="radBurgerBaconCheese" /><label for="radBurgerBaconCheese">w/ Bacon and Cheese (5.39)</label><br />
</div>
</div>
<div class="clear"></div>
<div class="row">


<div class="cell">
<input type="checkbox" name="chkFries" id="chkFries" /><label for="chkFries">Fries</label>
</div>


<div class="cell" id="divFries" style="visibility:hidden;">
<input type="radio" name="radFries" id="radFriesSmall" /><label for="radFriesSmall">Small (2.39)</label><br />
<input type="radio" name="radFries" id="radFriesMedium" /><label for="radFriesMedium">Medium (3.09)</label><br />
<input type="radio" name="radFries" id="radFriesLarge" /><label for="radFriesSmall">Large (4.99)</label><br />
</div>
</div>
<div class="clear"></div>
<div class="row">


<div class="cell">
<input type="checkbox" name="chkDrinks" id="chkDrinks" /><label for="chkDrinks">Drinks</label>
</div>


<div class="cell" id="divDrinks" style="visibility:hidden;">
<input type="radio" name="radDrinks" id="radDrinkSoda" /><label for="radDrinkSoda">Soda (1.69)</label><br />
<input type="radio" name="radDrinks" id="radDrinkWater" /><label for="radDrinkWater">Bottled Water (1.49)</label><br />
</div>


<div class="cell" style="float:right;">
Total Meal Cost: <input type="text" name="txtTotal" id="txtTotal" /><br /><br />
<button id="btnCompute" name="btnCompute">Compute Total</button>
</div>
</div>
<div class="clear"></div>
</div>
<link rel="stylesheet" type="text/css" href="week11.css">
<script src="week11.js"></script>
</body>
</html>
And the javascript to it.
var total;

function ToggleBurgers() {
var checkbox = document.getElementById('chkBurgers');
var burgers = document.getElementById('divBurgers');

if (checkbox.checked) {
burgers.style.visibility = 'visible';
} else {
burgers.style.visibility = 'hidden';
}
}

function ComputeTotal() {
}

function init() {
var chkBurgers = document.getElementById('chkBurgers');
chkBurgers.onchange = ToggleBurgers;

var btnCompute = document.getElementById('btnCompute');
btnCompute.onclick = ComputeTotal;
}

window.onload = init;
Thanks for the help.

Read answer

Answered!

Question #48357

AJAX | JavaScript | HTML | PHP

Why does this sequence work:
val.setUTCDate(date.d)
val.setUTCMonth(date.m-1)
val.setUTCFullYear(date.y)

But this sequences don't work: Sequence 1
val.setUTCFullYear(date.y)
val.setUTCMonth(date.m-1)
val.setUTCDate(date.d)

Sequence 2
val.setUTCFullYear(date.y)
val.setUTCDate(date.d)
val.setUTCDate(date.d)

Answer in progress...

Question #47676

AJAX | JavaScript | HTML | PHP

I am trying to get a temperature conversion caculator to work for me and I seem to be having a confusing problem. The html code below is what I'm needing to follow by.
<!DOCTYPE html>
<html>
<head>
<title>Temperature Converter</title>
</head>
<body>
<p>Enter a Temperature to Convert in the field below and select the starting scale.</p>
<input type="text" name="txtTemp" id="txtTemp" placeholder="Enter a Temperature" />
<br />
<br />
<input type="radio" id="radFahrenheit" name="radTemp" checked/>Fahrenheit to Celcius

<input type="radio" id="radCelcius" name="radTemp"/>Celcius to Fahrenheit

<button onclick="ConvertTemp();">Convert</button>

<div id="divResults"></div>
<script type="text/javascript" src="Week7.js"></script>
</body>
</html>

And with the javascript part I've gotten this so far also I'm not use to if and else statements yet.

function ConvertTemp(){
var radFahrenheit = parsefloat(document.getElementById('radFahrenheit').value);
var radCelcius = parsefloat(document.getElementById('radCelcius').value);
var txtTemp = document.getElementById('txtTemp');

if(radF.checked){
radFahrenheit = (radCelcius * (9/5)) + 32;
FahrenheitToCelcius();
}else if(radC.checked){
radCelcius = (radFahrenheit -32) * (5 / 9)
CelciustoFahrenheit();
}
}

Read answer

Answered!

Question #47635

AJAX | JavaScript | HTML | PHP

I am quite lost on this one:
<!DOCTYPE html>
<html>
<head>
<title>Temperature Converter</title>
<script type="text/javascript" src="Week7.js"></script>
</head>
<body>
<p>Enter a Temperature to Convert in the field below and select the starting scale.</p>
<input type="text" name="txtTemp" id="txtTemp" placeholder="Enter a Temperature" />
<br />
<br />
<input type="radio" id="radFahrenheit" name="radTemp" checked/>Fahrenheit to Celcius

<input type="radio" id="radCelcius" name="radTemp"/>Celcius to Fahrenheit

<button onclick="ConvertTemp();">Convert</button>

<div id="divResults"></div>
</body>
</html>

and what I've gotten so far:

function ConvertTemp(){
var radF = document.getElementById('radFahrenheit');
var radC = document.getElementById('radCelcius');

if(radF.checked){

FahrenheitToCelcius();
}else if(radC.checked){

CelciustoFahrenheit();
}
}

Any tips? thanks in advance.

Read answer

Answered!

Question #47585

AJAX | JavaScript | HTML | PHP

I need a JS Code to go with the following HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Shopping List</title>
<script type="text/javascript" src="Week6.js"></script>
</head>
<body>
<p>Use the field below to add items to your shopping list.</p>
<input type="text" name="txtItem" id="txtItem" placeholder="Enter an Item" />
<br />
<br />

<button onclick="AddItem();">Add Item</button>
<button onclick="RemoveLastItem();">Remove Last Item</button>
<div id="printedList"></div>
</body>
</html>

Ive gotten this but It's not working.
var shoppingList = [];
var outputDIV = document.getElementById('printedList');
var txtItem = document.getElementById('txtItem');

function AddItem() {
shoppingList.push(txtItem.value);
outputDIV.innerHTML = shoppingList;
}

function RemoveLastItem() {
shoppingList.pop();
outputDIV.innerHTML = shoppingList;
}

This week we will be building a simple Shopping List. In the template files, I have already created the HTML, including a text field, 2 buttons, and a DIV that we will use for our output. The 2 buttons each have the click event handler set to a function in the .js file. One of the buttons will add whatever item is in the text box to the array and then print it int he output DIV with the id of 'printedList'. The other will remove the last item from the array and then print the array again.

In the .js file you will notice that I have already declared an array called shoppingList for you. You'll also notice that it isn't inside either of the functions. The reason for this is called Scope. Up until now we have only dealt with variables inside our function. When we declare a variable inside a function, that particular function is the only thing that can access it. This is referred to as the local scope. When we just declare it in our js file without being inside a function, it instead becomes Global Scope, which means any function that we declared could access the data inside that array. Think about if you have your grocery list on your refrigerator vs in your bag. On the refridgerator would be global, as anyone in the house has access to it.

The 2 built in JavaScript methods you will be utilizing are .pop and .push. This is how we populate or remove things from an array in JavaScript.

1) PUSH - push allows us to add items to a JavaScript array. Assuming our array is called shoppingList (like in the assignment) we would utilize it like:

shoppingList.push('item to add');

2) POP - pop is a built in method that will remove the last item from an array. If we had an array that contained the items "Milk", "Eggs", "Bread", the .pop method would remove Bread. Unlike the .push method, it does not take an argument, so it's usage would look like this:

shoppingList.pop();

To print the array we can simply use the .toString() method. As a more complicated, albiet more presentable, way to display the array, you could use a loop along with some html and css to really make a nice looking list. However, we are more concerned with functionality over aesthetics. Like last week, once we have our output DIV into a variable that we can target, we can print the list using the following line:

outputDIV.innerHTML = shoppingList.toString();

Read answer

Answered!

Question #47452

AJAX | JavaScript | HTML | PHP

I need a JS Code to Work with the following HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Shopping List</title>
<script type="text/javascript" src=""></script>
</head>
<body>
<p>Use the field below to add items to your shopping list.</p>
<input type="text" name="txtItem" id="txtItem" placeholder="Enter an Item" />
<br />
<br />

<button onclick="AddItem();">Add Item</button>
<button onclick="RemoveLastItem();">Remove Last Item</button>
<div id="printedList"></div>
</body>
</html>

I came up with this:
var shoppingList = ['Milk', 'Eggs', 'Bread'];
var outputDIV = document.getElementById('printedList');

function AddItem(){
shoppingList.push('Bananas');
document.getElementById('printedList').innerHTML = shoppingList;
}
function RemoveLastItem(){
shoppingList.pop();
document.getElementById('printedList').innerHTML = shoppingList;
}

I need to to have it to involve this:

shoppingList.push('item to add');

shoppingList.pop();

and lastly the ouputDIV

outputDIV.innerHTML = shoppingList.toString();

Read answer

Answered!

AJAX | JavaScript | HTML | PHP Answers

Search & Filtering