Javascript Calculate a Form

-1

Пожалуйста, помогите мне: , когда я помещаю этот код, он показывает результат всего за секунду, прежде чем он обновит всю страницу. Я не мог найти никаких проблем, кроме того, что calcCharterCost не определен. Я не знаю, что это значит, потому что для меня это выглядит определенным. Спасибо,Javascript Calculate a Form

<script> 
function calcCharterCost() 
{ 
    var destList = document.getElementById("destList"); 
    var distance = destList.options[destList.selectedIndex].id; 
    var speedList = document.getElementById("speedList"); 
    var gph = speedList.options[speedList.selectedIndex].id; 
    var speed = speedList.value; 

    var fuelCost = document.getElementById("fuelCost").value; 
    var feeOutput = document.getElementById("fee"); 
    var time; 
    time = (distance/speed); 

    var cost; 
    cost = time * gph * fuelCost; 
    feeOutput.innerHTML = "$" + cost; 
} 

function validate() 
    { 
    if (isNaN(fuelCost) == true) 
    { 
    document.getElementById("error").innerHTML="Error invalid Fuel Cost"; 
    document.myform.fuelCost.value=""; 
    document.myform.fuelCost.focus(); 
    } 
    } 
</script> 

<body> 
<form name="myform"> 
<select id="destList"> 
    <option id="28">Falmouth to Nantucket</option> 
    <option id="11">Falmouth to Edgartown</option> 
    <option id="7.6">Falmouth to Oak bluffs</option> 
    <option id="38">Falmouth to Newport</option> 
</select> 
<p/> 
<select id="speedList"> 
    <option id="18" value="14">14 kt</option> 
    <option id="24" value="18">18 kt</option> 
    <option id="30" value="20">20 kt</option> 
    <option id="37" value="22">22 kt</option> 
</select> 
<p/> 
<input type="text" id="fuelCost" value="4.25" onblur="validate()"/> 

<i><small><span style="color:red;" id="error" ></i></small> </span> 
<p/> 

<button onClick="calcCharterCost()">Calculate</button> 
<p> The cost of the charter is <div id="fee">XXXX</div> 
</body>

источник

2016-08-16 VonTilly

Ваша кнопка должна иметь атрибут типа в этом случае вы тип отсутствующий = «кнопка» так кнопка <тип = «кнопка» OnClick = «calcCharterCost()»> Вычислить атрибут по умолчанию для кнопка отправляется. Вот почему он подавал. – user2242618

-1

По умолчанию кнопка без type представит форму.

Либо дать кнопку не-представить тип:

<button type="button" onClick="calcCharterCost()">Calculate</button>

Или удалить form тег:

<form name="myform">

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

источник

2016-08-16 19:14:40 David

-1

У вас есть ошибки разметки и не определены переменная fuelCost в глобальном масштабе. Когда выполняется метод проверки, он не может найти переменную fuelCost, поскольку она определена и используется в методе расчета.

Я исправил ваши сценарии и проблемы с разметкой. Проверьте исправленную версию и скрипку.

<script> 
 
    var fuelCost = 0; 
 

 
    function calcCharterCost() { 
 
    var destList = document.getElementById("destList"); 
 
    var distance = destList.options[destList.selectedIndex].id; 
 
    var speedList = document.getElementById("speedList"); 
 
    var gph = speedList.options[speedList.selectedIndex].id; 
 
    var speed = speedList.value; 
 

 
    fuelCost = document.getElementById("fuelCost").value; 
 
    var feeOutput = document.getElementById("fee"); 
 
    var time; 
 
    time = (distance/speed); 
 

 
    var cost; 
 
    cost = time * gph * fuelCost; 
 
    feeOutput.innerHTML = "$" + cost; 
 
    } 
 

 
    function validate() { 
 
    if (isNaN(fuelCost) == true) { 
 
     document.getElementById("error").innerHTML = "Error invalid Fuel Cost"; 
 
     document.myform.fuelCost.value = ""; 
 
     document.myform.fuelCost.focus(); 
 
    } 
 
    } 
 
</script> 
 

 
<body> 
 
    <select id="destList"> 
 
    <option id="28">Falmouth to Nantucket</option> 
 
    <option id="11">Falmouth to Edgartown</option> 
 
    <option id="7.6">Falmouth to Oak bluffs</option> 
 
    <option id="38">Falmouth to Newport</option> 
 
    </select> 
 
    <p> 
 
    <select id="speedList"> 
 
     <option id="18" value="14">14 kt</option> 
 
     <option id="24" value="18">18 kt</option> 
 
     <option id="30" value="20">20 kt</option> 
 
     <option id="37" value="22">22 kt</option> 
 
    </select> 
 
    </p> 
 
    <input type="text" id="fuelCost" value="4.25" onblur="validate()" /> 
 
    <span style="color:red;" id="error"></span> 
 

 
    <button onClick="calcCharterCost()">Calculate</button> 
 
    The cost of the charter is 
 
    <div id="fee">XXXX</div> 
 
</body>

Форма тег не требуется в этом случае, поскольку он не ссылается какой-либо другой части кода. Я удалил его.

Fiddle

источник

2016-08-16 19:27:11

Javascript Calculate a Form

ответ

Смежные вопросы