入力番号の隣にエラーメッセージが表示されない

私は助けが必要です：ユーザがfuelcost入力の数字ではなく数字を入力していることを検証する必要があります。また、入力フィールドの横にある小さな赤いイタリック体のフォントでエラーメッセージを表示し、フィールドにフォーカスを変更します（修復後のエラーメッセージをクリアしてください）。ここから続ける方法は何も分かりません：変数が数値（10進数または整数）である場合。あなたはそれ以外の場合。isFinite(fuelCost)場合、コストを計算することをif文でチェックすることができ入力番号の隣にエラーメッセージが表示されない

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

ヘルプ

出典

2016-08-16 VonTilly

"java"という質問タグが削除されました。あなたの質問はこの言語と関係がないようです。私が何かを見逃して、これを間違えた場合は、私に知らせてください。 –

_ "ユーザーが燃料費入力" _ 'に数字ではなく数字を入力していることを確認する必要があります。文字は数字ではありません – guest271314

isFinite(variable)

便利な小さな機能をチェックしていること、ユーザーに何らかのエラーメッセージを表示します番号を入力しないでください。

出典

2016-08-16 00:59:37

フォームにエレメントをラップして、入力フィールドのタイプを「番号」に設定することができます。ブラウザがエラーメッセージを処理します。

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

このフィドルをご覧ください。https://jsfiddle.net/ca3apsho/

出典

2016-08-16 01:05:58 derp

あなたは.数字が続く文字、または数字の文字に続く数字に一致するようにRegExp\d+\.\d+|\d+で<input>要素でpattern属性を使用することができます。 <input>要素、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>

出典

2016-08-16 01:25:08 guest271314

に隣接<label>要素は、私はここで多くの変更を行いました。まず、DOM（id、value、など）から数値を取り出すときに、文字列になります。だからあなたがそれらを使って数学をしようとすると、うまくいきません。これらの値は、探しているタイプに変換することをお勧めします。この場合は数字です。別のものはオプションであり、入力には値属性があります。だから、それを使うのが最善かもしれない。

HTMLをこのように変更しました。

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

JSはこのように見えます。

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)); 
}

出典

2016-08-16 03:07:21

入力番号の隣にエラーメッセージが表示されない

答えて

関連する問題