Fehlermeldung neben Eingabe Nummer nicht Text

Ich brauche Hilfe: Ich muss validieren, dass der Benutzer eine Zahl und nicht einen Text in der Kraftstoffkosten Eingabe eingeben. Zeigen Sie außerdem eine Fehlermeldung in einer kleinen, roten, kursiven Schrift neben dem Eingabefeld an und ändern Sie den Fokus auf das Feld. (Löschen Sie die Fehlermeldung nach der Reparatur.) Ich habe keine Ahnung, wie Sie von hier fortfahren:Fehlermeldung neben Eingabe Nummer nicht Text

<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" /> 
<p/> 
<button onClick="calcCharterCost()">Calculate</button> 
</body> 

<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; 
    if (fuelCost == "") 

    var time; 
    time = (distance/speed); 

    var cost; 
    cost = time * gph * fuelCost; 
    alert("cost = " + cost.toFixed(2)); 
} 
</script>

Hilfe

Quelle

2016-08-16 VonTilly

Ich habe Ihr "Java" -Fragetag gelöscht, da Ihre Frage anscheinend nichts mit dieser Sprache zu tun hat. Wenn ich etwas verpasst habe und dies irrtümlich gemacht habe, lass es mich wissen. –

_ "Ich muss bestätigen, dass der Benutzer eine Nummer und keinen Text im Kraftstoffkosten-Eingang eingibt." _ '.' Das Zeichen ist keine Nummer – guest271314

isFinite(variable)

die handliche kleine Funktion überprüft, ob eine Variable eine Zahl (dezimal oder integer) ist. Sie in einer if-Anweisung überprüfen könnten, wenn isFinite(fuelCost), die Kosten berechnen. Andernfalls , geben Sie dem Benutzer eine Art Fehlermeldung, dass sie didn Geben Sie keine Nummer ein.

Quelle

2016-08-16 00:59:37

Sie können Ihre Elemente in ein Formular einfügen und den Typ Ihres Eingabefeldes auf "Zahl" setzen. Der Browser wird dann die Fehlermeldung für Sie behandeln.

<input type="number" id="fuelCost" value="4.25"/>

Bitte beachten Sie diese Geige: https://jsfiddle.net/ca3apsho/

Quelle

2016-08-16 01:05:58 derp

Sie pattern Attribut bei <input> Elementen verwenden können mit RegExp\d+\.\d+|\d+ Ziffer von . Zeichen gefolgt von Ziffer oder Ziffern Zeichen folgen zu entsprechen; <label> Element neben <input> Element, css:invalid, :after, content

:invalid + [for="fuelCost"]:after { 
 
    content:"input requires number"; 
 
    color:red; 
 
}

<input type="text" id="fuelCost" value="4.25" pattern="\d+\.\d+|\d+"/> 
 
<label for="fuelCost"></label>

Quelle

2016-08-16 01:25:08 guest271314

ich hier viele Änderungen vorgenommen. Zuerst, wenn Sie Zahlen aus dem DOM ziehen (IDs, Werte usw.), werden sie Strings sein. Also, wenn Sie versuchen, Mathematik mit ihnen zu tun, wird es nicht funktionieren. Es empfiehlt sich, diese Werte in den gesuchten Typ zu konvertieren. In diesem Fall ist es Nummer. Eine andere Sache ist die Option und die Eingabe haben Wert Attribute. Also ist es am besten, sie zu benutzen.

Ich habe den HTML-Code so geändert, dass er so aussieht.

<body> 
<select id="destList"> 
    <option id="28" value="28">Falmouth to Nantucket</option> 
    <option id="11" value="11">Falmouth to Edgartown</option> 
    <option id="76" value="7.6">Falmouth to Oak bluffs</option> 
    <option id="38" value="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="" /> 
<p/> 
<button onClick="calcCharterCost()">Calculate</button> 
</body>

und das JS sieht so aus.

function calcCharterCost() 
{ 
    var time, 
     cost, 
     errorElem = document.createElement("span"), //create a span for the error message. 
     destList = document.getElementById("destList"), //grab the destList ID DOM element. 
     speedList = document.getElementById("speedList"), //grab the speedList ID DOM element. 
     fuelCost = document.getElementById("fuelCost"), //grab the fuelCost ID DOM element. 
     distance = destList.options[destList.selectedIndex].value, //get destList option value. 
     gph = speedList.options[speedList.selectedIndex].value, //get speedList option value. 
     fuelVal = fuelCost.value, //get the input value. 
     distanceNum = Number(distance), // convert the distance variable to a number. 
     fuelNum = Number(fuelVal), // convert the fuelVal variable to a number. 
     speed = Number(gph), // convert the gph variable to a number. 
     parentElem = fuelCost.parentNode; // get the parent node of the input element. 

     errorElem.textContent = "Fuel value needs a number value."; // create an error messaeg. 


    time = (distanceNum/speed); 

    cost = time * speed * fuelNum; 

    //ternary operation checks to see if the input is blank and a number type. if it is not append error element. 
    fuelVal === "" || typeof fuelVal !== "number" ? parentElem.appendChild(errorElem) : alert("cost = " + cost.toFixed(2)); 
}

Quelle

2016-08-16 03:07:21

Fehlermeldung neben Eingabe Nummer nicht Text

Antwort

Verwandte Themen