#javascript #html
#javascript #HTML
Вопрос:
Я пытаюсь использовать цикл for, чтобы определить, какой код дополнительного продукта был выбран пользователем, и сохранить коды в массиве, а также использовать другой цикл for для определения названия дополнительного продукта и цены, используя операторы if..else . Ниже приведены коды:
<!DOCTYPE html>
<html>
<head><title>Lab 8</title>
<script type="text/javascript">
function input()
{
var code, num_adult, num_child, name, price, addon, total, addon_total=0, addon_price, total_adult=0, total_child=0, i, j;
var array=["A1","A2","A3"];
var order;
code = document.ticketfrm.mov_code.value;
num_adult = document.ticketfrm.adult_qty.value;
num_child = document.ticketfrm.child_qty.value;
switch(code)
{
case "M1":
name="Jumanji";
price=12.90;
break;
case "M2":
name="Coco";
price=10.50;
break;
case "M3":
name="Blade Runner";
price=9.30;
break;
case "M4":
name="The Foreign";
price=12.80;
break;
}
total_adult = price*num_adu<
total_child = price*0.7*num_child;
document.write("Movie Title : " name " (RM" price.toFixed(2) ")");
document.write("</br>Adult Total : RM " total_adult.toFixed(2) " (" num_adult "x RM" price.toFixed(2) ")");
document.write("</br>Child Total : RM " total_child.toFixed(2) " (" num_child "x RM" price*0.7.toFixed(2) ")");
for(i=0; i<3; i )//Use a for loop to identify which add-on food code was chosen by the user and store the codes in an array.
{
if(document.ticketfrm.add_on_code.checked)
{
order = document.ticketfrm.add_on_code.value;
}
}
document.write(order);
for(j = 0; j<3; j )
{
if (order[j] = A1)
{
order_price = 7.9;
}
else if (order[j] = "A2")
{
order_price = 5.5;
}
else if (order[j] = "A3")
{
order_price = 3.5;
}
addon_total= addon_total addon_price;
}
total = price total_adult total_child addon_total;
//display
document.write("Add-On Total : RM " addon_total);
document.write("Add-On Detail : ");
document.write("");
}
</script>
</head>
<body>
<h3>Book A Movie Ticket</h3>
<p>Choose your movie and add-on</p>
<form name="ticketfrm">
<p>Movie Title:
<select name="mov_code">
<option value="M1">Jumanji (RM 12.90)</option>
<option value="M2">Coco (RM 10.50)</option>
<option value="M3">Blade Runner (RM 9.30)</option>
<option value="M4">The Foreigner (RM 12.80)</option>
</select>
<p>Adult : <input type="number" name="adult_qty" min="1" max="10" /></p>
<p>Child : <input type="number" name="child_qty" min="0" max="10" /></p>
<p>Add-Ons:
<input type="checkbox" name="add_on_code" value="A1">Popcorn (RM 7.90)
<input type="checkbox" name="add_on_code" value="A2">Nachos (RM 5.50)
<input type="checkbox" name="add_on_code" value="A3">Soda (RM 3.50)
</p>
<p><input type="button" name="buybtn" value="Buy Now" onclick="input();" />
</form>
</body>
</html> Но цикл for не сработал, и он показывает ошибку при не удается прочитать свойство ‘add_on_code’ и ‘A1’ из undefined
Комментарии:
1. почему вы делаете document.ticketfrm ….. и используете let и const вместо var
Ответ №1:
Он возвращал неопределенный, поскольку ticketfrm в «document.ticketfrm» не существует, поскольку вы используете document.write, который создает отдельный новый документ.
Метод write() в основном используется для тестирования: если он используется после полной загрузки HTML-документа, он удалит весь существующий HTML.
Я также внес некоторые изменения в ваш код —
- order должен быть массивом, и в первом цикле for вы должны использовать метод .push, чтобы поместить в него свои дополнительные заказы.
- Второй цикл for должен иметь orders.length в качестве условия вместо его жесткого кодирования 3.
- Если условия во втором цикле for, должны включать операторы равенства == или === .
- Во втором цикле for переменная addon_price должна быть изменена вместо order_price . Таким образом, addon_total будет правильно рассчитан.
<!DOCTYPE html>
<html>
<head><title>Lab 8</title>
<script type="text/javascript">
function input()
{
var code, num_adult, num_child, name, price, addon, total, addon_total=0, addon_price, total_adult=0, total_child=0, i, j;
var array=["A1","A2","A3"];
let order=[];
const savedForm = document.ticketfrm;
code = document.ticketfrm.mov_code.value;
num_adult = document.ticketfrm.adult_qty.value;
num_child = document.ticketfrm.child_qty.value;
switch(code)
{
case "M1":
name="Jumanji";
price=12.90;
break;
case "M2":
name="Coco";
price=10.50;
break;
case "M3":
name="Blade Runner";
price=9.30;
break;
case "M4":
name="The Foreign";
price=12.80;
break;
}
total_adult = price*num_adu<
total_child = price*0.7*num_child;
document.write("Movie Title : " name " (RM" price.toFixed(2) ")");
document.write("</br>Adult Total : RM " total_adult.toFixed(2) " (" num_adult "x RM" price.toFixed(2) ")");
document.write("</br>Child Total : RM " total_child.toFixed(2) " (" num_child "x RM" price*0.7.toFixed(2) ")");
for(i=0; i<3; i )//Use a for loop to identify which add-on food code was chosen by the user and store the codes in an array.
{
if(savedForm.add_on_code[i].checked)
{
order.push(savedForm.add_on_code[i].value);
}
}
document.write("<br>");
for(j = 0; j<order.length; j )
{
if (order[j] == "A1")
{
addon_price = 7.9;
}
else if (order[j] == "A2")
{
addon_price = 5.5;
}
else if (order[j] == "A3")
{
addon_price = 3.5;
}
addon_total= addon_total addon_price;
}
total = price total_adult total_child addon_total;
//display
document.write("Add-On Total : RM " addon_total);
document.write("Add-On Detail : " order);
document.write("");
}
</script>
</head>
<body>
<h3>Book A Movie Ticket</h3>
<p>Choose your movie and add-on</p>
<form name="ticketfrm">
<p>Movie Title:
<select name="mov_code">
<option value="M1">Jumanji (RM 12.90)</option>
<option value="M2">Coco (RM 10.50)</option>
<option value="M3">Blade Runner (RM 9.30)</option>
<option value="M4">The Foreigner (RM 12.80)</option>
</select>
<p>Adult : <input type="number" name="adult_qty" min="1" max="10" /></p>
<p>Child : <input type="number" name="child_qty" min="0" max="10" /></p>
<p>Add-Ons:
<input type="checkbox" name="add_on_code" value="A1">Popcorn (RM 7.90)
<input type="checkbox" name="add_on_code" value="A2">Nachos (RM 5.50)
<input type="checkbox" name="add_on_code" value="A3">Soda (RM 3.50)
</p>
<p><input type="button" name="buybtn" value="Buy Now" onclick="input();" />
</form>
</body>
</html> Комментарии:
1. Просто убедитесь, что вы проголосовали и приняли ответ, если он разрешает ваш запрос. Спасибо 🙂