使 JavaScript 函数工作时遇到麻烦

Trouble getting a javascript function to work

本文关键字：遇到 麻烦 工作 JavaScript 函数      更新时间：2023-09-26

有人可以帮助我理解为什么以下代码不起作用吗？ 网页正确加载所有元素，但"displayOrder（）"函数无法正确执行。我的网页询问用户的名字和姓氏，然后有 5 个单选按钮询问披萨类型，然后用户按下显示订单按钮，单击即可运行该功能。该函数假设在按钮上方的只读文本区域中显示"发票"。我不知道为什么它不会运行！

这是 HTML

修订后的 HTML 代码

<!DOCTYPE html>
<html lang="en-US">
//Program Name: PizzaOrderForm.html
//Purpose: Creates a form and calls functions to order pizza 
//Author: Alexander Bitar 50070103
//Date Last Modified: 02-25-2016

<head>
<script type="text/javascript">
var NL = "'n"; //newline js
//DISPLAY ORDER FUNCTION
function displayOrder() {
 var firstName = document.orderForm.firstName.value;
 var lastName = document.orderForm.lastName.value;
 var pizzaType = document.orderForm.pType.value;
 document.orderForm.fullOrder.value = "HERE IS YOUR ORDER:" + NL + NL 
 +"Pizza Ordered: " + pizzaType + NL 
 +"First Name: " + firstName + " Last Name: " + lastName + NL 
 +"You're pizza will be ready in 30 minutes!" + NL 
 +"Thank you for placing your order with Papa Hut's Pizza!";
}   
</script>
</head>
<body bgcolor="azure">
<h1 Align="center"> Papa Hut's Pizza </h1>
<hr>
<br>
<br>
<p> Welcome to Papa Hut's Ordering system. Please Fill out the form to proceed with an order. </p>
<hr>
<br>
<br>
<form name="orderForm">
First Name:<br>
  <input type="text" name="firstName"> <br>
Last name:<br>
  <input type="text" name="lastName"><br>
  Choose  A Pizza<br>
<input type="radio" name="pType" value="Pepperoni"> Pepperoni <br>
<input type="radio" name="pType" value="Cheese"> Cheese<br>
<input type="radio" name="pType" value="Black Olive"> Black Olive <br>
<input type="radio" name="pType" value="Chicken Finger"> Chicken Finger <br>
<input type="radio" name="pType" value="TODAY'S SPECIAL"> TODAY'S SPECIAL<br>
<textarea name="fullOrder" value="" rows="5" cols="50"> Your order will appear here after it is sent!</textarea> <br>
<button type="displayButton" onclick="displayOrder()"> Place Order!</button>
</form>
</html>

这里有一些问题...

首先，javascript区分大小写，所以当你有一个名为"firstName"的输入时。

<input type="text" name="firstName">

然后，当您尝试在此处引用变量作为"Firstname"时，JavaScript将无法理解：

var firstName = document.orderForm.Firstname.value;

其次，您无需手动为单选按钮设置变量。该值已经保存在 document.orderForm.pType.value 中，就像您的其他字段一样！所以这个方法是不必要的：

function setType(pType){
 var pizzaType = pType;
}
相关文章：