2016-02-25 4 views
-1

Может кто-нибудь помочь мне понять, почему следующий код не работает? веб-страница загружает все элементы должным образом, но функция displayOrder() не будет выполняться должным образом. Моя веб-страница запрашивает у пользователя свое имя и фамилию, затем есть 5 радиокнопок, запрашивающих тип пиццы, затем пользователь нажимает кнопку порядка отображения, которая по щелчку запускает функцию. Функция должна отображать «Счет-фактуру» в текстовой области только для чтения над кнопкой. Я не уверен, почему это не сработает!Проблема с функцией javascript для работы

вот HTML

REVISED 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> 
+0

Любые ошибки в консоли? –

+0

кстати. это должно быть 'document.orderForm.fullOrder.value' вместо' document.OrderForm.fullOrder.value' – InTry

+0

Что делать, если вы удаляете атрибут 'readonly'? Любое изменение? –

ответ

2

Есть несколько проблем здесь ...

Во-первых, JavaScript чувствителен к регистру, так, когда у вас есть вход под названием «ПгвЬЫате '

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

тогда, когда вы пытаетесь ссылаться на переменную здесь в JavaScript «FirstName» не поймет:

var firstName = document.orderForm.Firstname.value; 

Во-вторых, вам не нужно вручную установить переменную для радио-кнопки. Значение уже содержится в файле document.orderForm.pType.value, как и все остальные поля! Поэтому этот метод не нужен:

function setType(pType){ 

var pizzaType = pType; 
} 
+0

Спасибо, я удалил функцию setType и очистил их от переключателей. Но он все еще не работает, страница обновляется, когда я нажимаю кнопку «Заказ места», и ничего не отображается в поле textarea. я добавлю свой переработанный код на вопрос –

+0

, функция displayOrder(), я думаю, сработала, но кнопка обновляет страницу и возвращает другой текст. –

+0

попробуйте следующее: http://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked – tdurtsch