无法使JavaScript函数正常工作

Question

Can someone help me understand why the following code wont work? 有人可以帮助我了解为什么以下代码无法正常工作吗？ the webpage loads all the elements properly but the "displayOrder()" function wont execute properly. 该网页正确加载了所有元素，但“ displayOrder（）”函数无法正确执行。 My webpage asks the user for their first name and last name, then there are 5 radio buttons asking for a pizza type, then the user presses a display order button, which on click runs the function. 我的网页要求用户输入名字和姓氏，然后有5个单选按钮要求输入披萨类型，然后用户按显示顺序按钮，单击该按钮即可运行该功能。 The function is suppose to display an "Invoice" in the readonly text area above the button. 该功能假定在按钮上方的只读文本区域中显示“发票”。 Im not sure why it wont run! 林不知道为什么它不会运行！

here is the html 这是HTML

REVISED HTML CODE 修订的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>

Answer 1

There are a few problems here... 这里有一些问题...

First, javascript is case sensitive so when you have an input named 'firstName' 首先，JavaScript区分大小写，因此当您输入名为“ firstName”的输入时

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

then when you try to reference the variable here as 'Firstname' javascript will not understand: 那么当您尝试在此处将变量引用为“名字”时，javascript将无法理解：

var firstName = document.orderForm.Firstname.value;

Second, you do not need to manually set a variable for the radio button. 其次，您无需手动为单选按钮设置变量。 The value is already held in document.orderForm.pType.value, just like the rest of your fields! 该值已经保存在document.orderForm.pType.value中，就像其余字段一样！ So this method is unnecessary: 因此，此方法是不必要的：

function setType(pType){

 var pizzaType = pType;
}

无法使JavaScript函数正常工作

问题描述

1 个解决方案

解决方案1
2 2016-02-25 19:18:34

无法使JavaScript函数正常工作

问题描述

1 个解决方案

解决方案1 2 2016-02-25 19:18:34

解决方案1
2 2016-02-25 19:18:34