一个编程作业,要求的知识点都是基础的,但也是典型的,
<!DOCTYPE html>
<html>
<body>
<h1>Pizzas Ordering Form</h1>
<p> Simply select your pizza and enter quantity to calculate total order cost </p>
<form id="orderForm">
<p>
<label for="pizza_list">Select a pizza</label>
<select name="pizza_list " id="pizza_list">
<option value="---" selected id="empty">-----</option>
<option value="10" name="Margherita">Margherita($10 each)</option>
<option value="12" name="Pepperoni">Pepperoni ($12 each)</option>
<option value="15" name="Supreme">Supreme ($15 each)</option>
</select>
</p>
<p>
<label for="pizza_quantity">Pizza Quantity</label>
<input type="text" name="pizza_quantity" value="0" id="pizza_quantity">
</p>
<p> <input type="button" value="Add Pizza" id="add_pizza" onclick="javascript:addPizza()"> </p>
<p> <input type="button" value="Calculate Total Cost" id="total_cost" onclick="javascript:calculate()"> </p>
</form>
<p><ul id="ulList"></ul></p>
<div id="message"></div>
<script>
// Your code goes here
var total_cost = 0;
function addPizza(){
var pizza_list = document.getElementById("pizza_list");
var pizza_list_selectedIndex = pizza_list.selectedIndex;
var pizza_list_selected_quantity = document.getElementById("pizza_quantity").value;
total_cost += pizza_list.options[pizza_list_selectedIndex].value * document.getElementById("pizza_quantity").value;
document.getElementById("ulList").innerHTML += "<li>" + pizza_list.options[pizza_list_selectedIndex].text + ":" + pizza_list_selected_quantity + "</li>";
}
function calculate(){
document.getElementById("message").innerHTML = "Total bill of the order is - $" + total_cost.toFixed(2);
}
</script>
</body>
</html>