Javascript Berechnen eines Formulars

-1

Bitte helfen Sie mir: Wenn ich diesen Code einfügen zeigt es das Ergebnis nur für eine Sekunde, bevor es die gesamte Seite aktualisiert. Ich konnte keine Probleme finden abgesehen davon, dass calcCharterCost nicht definiert ist. Ich weiß nicht, was es damit meint, denn für mich sieht es definiert aus. Danke,Javascript Berechnen eines Formulars

<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>

Quelle

2016-08-16 VonTilly

Ihre Schaltfläche, um ein type-Attribut in diesem Fall haben muss Sie type = "button" so fehlen Das Standardattribut für eine Schaltfläche ist Senden. Deshalb wurde es eingereicht. – user2242618

-1

standardmäßig eine Schaltfläche ohne type ein Formular einzureichen.

Entweder geben Sie die Taste ein nicht-einreichen Typ:

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

Oder entfernen Sie den form tag:

<form name="myform">

Letzteres ohnehin vorzuziehen scheint, da die form Tag nie geschlossen und technisch Markup ist ungültig. Nichts ist eigentlich mit dieser form, so dass es nicht benötigt wird.

Quelle

2016-08-16 19:14:40 David

-1

Sie haben Markup-Fehler und haben die Variable fuelCost nicht im globalen Gültigkeitsbereich definiert. Wenn die Validierungsmethode ausgeführt wird, kann sie die Variable fuelCost nicht finden, wie sie in der Berechnungsmethode definiert und verwendet wird.

Ich habe Ihre Skript- und Markup-Probleme behoben. Bitte überprüfe die korrigierte Version und die Geige.

<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>

Formular-Tag wird in diesem Szenario nicht erforderlich, da es nicht von einem anderen Teil des Codes verwiesen wird. Ich habe es entfernt.

Fiddle

Quelle

2016-08-16 19:27:11

Javascript Berechnen eines Formulars

Antwort

Verwandte Themen