Отображение расчета JavaScript на основе выбора меню - PullRequest
Новая
       17

Отображение расчета JavaScript на основе выбора меню

2 голосов
/ 29 апреля 2011

Этот должен быть для кого-то хлопом. Я абсолютный новичок в Javascript, настолько, что я поражен тем, что зашел так далеко. Настолько, что когда вы посмотрите на мой код, вы, скорее всего, сразу же увидите явные проблемы с ним и посмеетесь надо мной, потому что я слепо гадал о синтаксисе на данный момент. Пожалуйста, ознакомьтесь с приведенным ниже кодом и наслаждайтесь смешком. Я подожду.

Хорошо, поэтому я пытаюсь сделать простой калькулятор, который отображает ежемесячную экономию при покупке проездного билета на оплату наличными. Я пытаюсь отобразить другой ответ в зависимости от зоны, выбранной в меню выбора. Формулы в каждом операторе if действительно работают, когда я просто перечисляю переменные вне операторов if (отсюда и мое вышеупомянутое изумление), отображая каждый ответ в виде серии предупреждений, но я хотел бы отображать только соответствующий ответ и четко мой синтаксис не в порядке.

Для меня было бы честью и смирением быть обученным в этом вопросе, имея в виду, конечно, мои менее чем элементарные навыки JS. Большое спасибо заранее. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cost Savings Calculator</title>



<script language="JavaScript">

<!-- Begin CE MP Savings Calc script
function  doMath3() {
var one = eval(document.theForm3.elements[0].value)
var two = eval(document.theForm3.elements[1].value)
var three = eval(document.theForm3.elements[3].value)

if(document.theForm3.elements[3].value = "z4"){
var prodZ4 = (((one  *   two) * 4.25) *12) - 1680
alert("Your yearly savings if you buy a Commuter Express Zone 4 monthly pass is $"  +  prodZ4  +  ".")
}

if(document.theForm3.elements[3].value = "z3"){
var prodZ3 = (((one  *   two) * 3.75) *12) - 1488
alert("Your yearly savings if you buy a Commuter Express Zone 3 monthly pass is $"  +  prodZ3  +  ".")
}

if(document.theForm3.elements[3].value = "z2"){
var prodZ2 = (((one  *   two) * 3) *12) - 1200
alert("Your yearly savings if you buy a Commuter Express Zone 2 monthly pass is $"  +  prodZ2  +  ".")
}

if(document.theForm3.elements[3].value = "z1"){
var prodZ1 = (((one  *   two) * 2.5) *12) - 960
alert("Your yearly savings if you buy a Commuter Express Zone 1 monthly pass is $"  +  prodZ1  +  ".")
}

if(document.theForm3.elements[3].value = "Base"){
var prodBase = (((one  *   two) * 1.5) *12) - 684
alert("Your yearly savings if you buy a Commuter Express Base monthly pass is $"  +  prodBase  +  ".")
}

}
// End CE MP Savings Calc script -->
</script>



</head>

<body>

<form name="theForm3">
Days you commute monthly:
<input type="text">
Daily trips on Commuter Express:
<input type="text">
Choose Zone: <select name="zone">
<option value="Base">Base</option>
<option value="z1">Zone 1</option>
<option value="z2">Zone 2</option>
<option value="z3">Zone 3</option>
<option value="z4">Zone 4</option>
</select>
<input type="button" value="Show result" onclick="doMath3()">

</form>


</body>
</html>

Ответы [ 3 ]

3 голосов
/ 29 апреля 2011

Вот один из способов сделать это: 

function  doMath3() {
    var one = parseInt(document.theForm3.elements[0].value);
    var two = parseInt(document.theForm3.elements[1].value);
    var selection = document.getElementsByName("zone")[0].value;

    if(selection === "z4"){
        var prodZ4 = (((one  *   two) * 4.25) *12) - 1680;
        alert("Your yearly savings if you buy a Commuter Express Zone 4 monthly pass is $"  +  prodZ4  +  ".");
    }
    else if(selection === "z3"){
        var prodZ3 = (((one  *   two) * 3.75) *12) - 1488;
        alert("Your yearly savings if you buy a Commuter Express Zone 3 monthly pass is $"  +  prodZ3  +  ".");
    }
    else if(selection === "z2"){
        var prodZ2 = (((one  *   two) * 3) *12) - 1200;
        alert("Your yearly savings if you buy a Commuter Express Zone 2 monthly pass is $"  +  prodZ2  +  ".");
    }
    else if(selection === "z1"){
        var prodZ1 = (((one  *   two) * 2.5) *12) - 960;
        alert("Your yearly savings if you buy a Commuter Express Zone 1 monthly pass is $"  +  prodZ1  +  ".");
    }
    else if(selection === "Base"){
        var prodBase = (((one  *   two) * 1.5) *12) - 684;
        alert("Your yearly savings if you buy a Commuter Express Base monthly pass is $"  +  prodBase  +  ".");
    }
}

Исправления:

  1. Вы пропускаете ; (точка с запятой) везде - они могут показатьсячтобы быть «необязательным» для разработчика, но внутренне, JavaScript будет добавлять их автоматически, приводя к трудно отслеживаемым ошибкам.Поставьте один в конце каждого оператора.

  2. Как уже упоминалось, не используйте eval(), используйте parseInt() для получения целых чисел и parseDouble() для получения чисел с плавающей запятой.

  3. = - оператор присваивания, == и === используются для проверки равенства.Из этих двух === должно быть предпочтительным.== будет выполнять принуждение, в то время как === не будет.

  4. Самая большая проблема, я думаю, заключалась в том, что document.theForm3.elements[3].value получает кнопку, а не поле выбора.Это должен быть индекс 2.

Опционально:

  1. Вы можете использовать else if s, поскольку может быть выполнено только одно из условийправда в любое время.Вместо этого вы также можете использовать switch-case .

  2. Я бы также не использовал индексы для получения элементов, так как вы можете изменить форму позже, и она будетбыть больно, чтобы убедиться, что вы обновляете все индексы правильно.Проверьте getElementsById вместо.Как отмечает @Frits в комментарии ниже, вы также можете использовать синтаксис document.formname.inputname (т. Е. document.theForm3.zone.value; для вашей формы), чтобы получить элемент более аккуратно и безопасно.

Вот рабочий пример .

1 голос
/ 29 апреля 2011

Изменить eval на: 

parseFloat(document.theForm3.elements[0].value, 10);

Назначение вместо сравнения: 

if(document.theForm3.elements[3].value = "Base"){

Изменить на: 

if(document.theForm3.elements[3].value === "Base"){

У полей выбора нет значениясвойство (хотя современные браузеры принимают его) 

document.theForm3.elements[3].value

Правильный путь: 

var select = document.theForm3.elements[2];
select.options[select.selectedIndex].value; // <-- this is the 'value'

Я думаю, что это должно исправить ваш код.

1 голос
/ 29 апреля 2011

Ваши операторы if присваивают вместо сравнения. См. http://www.w3schools.com/js/js_comparisons.asp для подробностей о компараторах в javascript.

если (a == b)

проверяет, равен ли a b

если (a = b)

устанавливает значение равным значению b, а затем возвращает true, т. Е. Это всегда проходит.

Это одна заметная ошибка, которая у вас есть, хотя я не уверен, что именно она и стала причиной вашей проблемы.

...