Форма расчетов с помощью JavaScript - PullRequest
Новая
       14

Форма расчетов с помощью JavaScript

1 голос
/ 30 января 2012

Я кодировал простую форму для расчета цены по размеру, форме, цвету и количеству с помощью JavaScript.Проблема в том, что когда я добавляю значения, они не отображаются.Когда я получаю только сумму первого поля выбора, оно появляется.Но не тогда, когда я пытаюсь добавить итоги, а количество, похоже, не работает вообще.Я пробовал много разных вариантов кода, но просто не могу заставить его работать.

Вот HTML-код формы. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Price Qoute</title>
  <script type="text/javascript" src="formCalc.js">
  </script>
</head>

<body onload='hideTotal()'>
 <form action="" id="price-quote">
  <select id="size" name="size" onchange="getTotal()">
    <option value="None">Select Size</option>
    <option value="2.5 inches">2.5 inches</option>
    <option value="3 inches">3 inches</option>
  </select>

<select id="shape" name="shape" onchange="getTotal()">
    <option value="None">Select Shape</option>
    <option value="Round">Round</option>
    <option value="Oval">Oval</option>
</select>

<select id="color" name="color" onchange="getTotal()">
   <option value="None">Select Color</option>
   <option value="One Color">One Color</option>
   <option value="Full Color">Full Color</option>
</select>

<label>Quantity</label><input type="text"  name="quantity" id="quantity"          onchange="getTotal()" />

</form>
<div id="totalPrice"></div>
</body>
</html>

, а вот JavaScript 

var size_prices= new Array();
size_prices["None"]=0;
size_prices["2.5 inches"]=.10;
size_prices["3 inches"]=.20;

function getSizePrice()
{
    var sizePrice=0;
    var theForm = document.forms["price-quote"];
    var selectedSize = theForm.elements["size"];
    sizePrice = size_prices[selectedSize.value];
    return sizePrice;
}

var shape_prices= new Array();
shape_prices["None"]=0;
shape_prices["Round"]=.10;
shape_prices["Oval"]=.20;

function getShapePrice()
{
    var shapePrice=0;
    var theForm = document.forms["price-quote"];
    var selectedShape = theForm.elements["shape"]; 
    shapePrice = shape_prices[selectedShape.value];
    return shapePrice;
}

var color_prices= new Array();
color_prices["None"]=0;
color_prices["One Color"]=1;
color_prices["Full Color"]=3;

function getColorPrice()
{
    var colorPrice=0;
    var theForm = document.forms["price-quote"];
    var selectedColor = theForm.elements["color"];
    colorPrice = color_prices[selectedColor.value];
    return colorPrice;
}

function getQuantity()
{
    var theForm = document.forms["price-quote"];
    //Get a reference to the TextBox
    var quantity = theForm.elements["quantity"];
    var howmany =0;
    //If the textbox is not blank
    if(quantity.value!="")
    {
        howmany = parseInt(quantity.value);
    }
    return howmany;
}

function getTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return           together
    var instantPrice = getSizePrice() + getShapePrice() + getColorPrice(); 
    //display the result
    document.getElementById('totalPrice').innerHTML =
                                  "$"+instantPrice;
}

Что я делаю не так?

!!!! Обновление !!!!

Хорошо, у меня была опечатка, поэтому я получил форму для расчета цены:поля выбора, но все еще не идут на количество.Мне действительно нужно иметь это обновление динамически по мере того, как пользователь печатает (без кнопки или нажатия Enter), если это вообще возможно.

Ответы [ 2 ]

1 голос
/ 30 января 2012

Вам необходимо сузить / разбить проблему.

1) Попробуйте получить значение первого поля выбора самостоятельно (вы сделали это)

2) Попробуйте получитьзначение второго поля выбора само по себе.

3) Попробуйте получить значение третьего поля выбора самостоятельно.

4) Наконец, попробуйте все три.

Просто продолжайте разбирать проблему, если вы сузите ее.

Приветствия

0 голосов
/ 30 января 2012

Несколько комментариев:

Несмотря на то, что большинство браузеров используют первый вариант выбранного элемента, выбранного по умолчанию, некоторые могут этого не делать.Поэтому всегда задавайте опцию по умолчанию для выбранного атрибута.

Вы можете немного упростить задачу, используя значения опций, такие как «2,5», а не «2,5 дюйма».

В вашем коде: 

> var size_prices= new Array();
>  size_prices["None"]=0;
>  size_prices["2.5 inches"]=.10;
>  size_prices["3 inches"]=.20;

Здесь вы используете массив как объект.Лучше использовать правильный инструмент для работы, поэтому используйте объект: 

 var size_prices= { 
      'None': 0,
      '2.5 inches': 0.10,
      '3 inches': 0.20
 };

То же самое относится и к «массиву» color_prices.

[...] 

>     var sizePrice=0;

Если вы не собираетесь использовать назначенное значение, не назначайте его.Вы присваиваете значение позже, поэтому просто объявите переменную: 

 var sizePrice;

В функции getQuantity : 

> if(quantity.value!="") {
>      howmany = parseInt(quantity.value);
>  }
>  return howmany;

Вы действительно должны проверить любое входное значение какэто может быть мусор или возвращаемое значение, как это может быть NaN (потому что входные данные были мусором).И вы должны всегда включать основание с парсингом в случае, если введено 09: 

alert(parseInt('09')); // 0
alert(parseInt('09', 10)); // 9

В функции getTotal : 

> var instantPrice = getSizePrice() + getShapePrice() + getColorPrice();

Куда включается количество?

Редактировать

Я не знаю, где вы идете не так, используя следующее: 

 var instantPrice = (getSizePrice() + getShapePrice() +
                      getColorPrice()) * getQuantity();

Я получаю то, что кажется правильным значением.Вам необходимо поработать над проверкой введенного значения для количества и правильно отформатировать ответ до двух десятичных знаков.

...