使用Javascript計算表格

-1

請幫助我：當我把這段代碼顯示在刷新整個頁面之前只有一秒的結果。我沒有找到任何問題，除了它說calcCharterCost沒有定義。我不知道這是什麼意思，因爲對我來說它看起來很明確。謝謝，使用Javascript計算表格

<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計算表格

回答

相關問題