ユーザエラーのために "number"タイプの出力フィールドに文字列を返すjavascript

私は、javascriptとhtml5のハングを取得するためのプロジェクトに取り組んでいます。ユーザエラーのために "number"タイプの出力フィールドに文字列を返すjavascript

今私はinput_aとinput_bの2つのテキストフィールドを持っています。私はこれらの2つの数値を使用する1つの出力フィールドを持っています（全体または浮動小数点が可能です）。計算結果を出力フィールドに返します。簡単にするために、ここで（CSSファイルを無視する）これが設定されている方法です。ありがたいことに

<!DOCTYPE html> 
<html> 
     <head> 
      <title>JS Test</title> 
      <meta charset="utf-8" /> 
     </head> 
     <script> 
      function select_formula() { 
       track_a = input_a.valueAsNumber; 
       track_b = input_b.valueAsNumber; 
       if(track_a > 200.0 || track_a < 0.0) { 
        console.log("Number must be between 0 BPM and 200 BPM"); 
        return false; 
       } 
       if(track_b > 200.0 || track_b < 0.0) { 
        console.log("Number must be between 0 BPM and 200BPM"); 
        return false; 
       } 
       if(track_a > track_b) { 
        return "((track_a - track_b)/track_a) * 100"; 
       } else if(track_a < track_b) { 
        return "((track_a - track_b)/track_b) * 100"; 
       } else { 
        return "0.0"; 
       } 
      } 
     </script> 
    <body> 
     <header> 
       <h1>JS Test</h1> 
     </header> 

     <form onsubmit="return false" oninput="o.value=eval(select_formula());"> 
        Track A: <input name="input_a" id="input_a" type="number" step="0.01" min="0.0" max="200.0" placeholder="Track A"><br/> 
        Track B: <input name="input_b" id="input_b" type="number" step="0.01" min="0.0" max="200.0" placeholder="Track B"><br/> 
        <br /> 
        Output: <output name="o" step="0.01" value="0.00" for="a b"></output> 
     </form> 
    </body> 
</html>

今誰が入力テキストフィールドに文字列を、私の入力はnumberの種類を持っているので、することができます。しかし、誰かがこの範囲外の無効な番号を入力した場合、出力にエラーメッセージ"Number must be between 0 BPM and 200 BPM"が表示されたかったのです。

現時点ではalert()を作成することはできますが、私は実際にユーザーを悩ます必要はなく、エラーで遠くに行く必要はありません。だから私のエラーを出力に送るにはどうしたらいいですか？私はJavaScriptの初心者ですので、私はちょうどこの時点で多くの異なるチュートリアルに従っています。適切な方向への助けがあれば幸いです。

出典

2016-03-27 Alex

最も単純な方法では、エラーを追加するために使用するdivが必要です。のような何か：

<script> 
     function isValid(track_a, track_b) { 
      if(track_a > 200.0 || track_a < 0.0) { 
       return "Number must be between 0 BPM and 200 BPM"; 
      } 
      if(track_b > 200.0 || track_b < 0.0) { 
       return "Number must be between 0 BPM and 200BPM"; 
      } 
      return ""; 
     } 

     function calculate(track_a, track_b) { 
      if(track_a > track_b) { 
       return "((track_a - track_b)/track_a) * 100"; 
      } else if(track_a < track_b) { 
       return "((track_a - track_b)/track_b) * 100"; 
      } else { 
       return "0.0"; 
      } 
     } 

     function main() { 
      track_a = input_a.valueAsNumber; 
      track_b = input_b.valueAsNumber; 

      var message = isValid(track_a, track_b); 
      if (message !== "") 
       $('#result').text(message); 
      else { 
       var result = calculate(track_a, track_b); 
       $('#result').text(result); 
      } 
     } 
    </script> 
<body> 
     <form onsubmit="return false" oninput="o.value=eval(main());"> 
        Track A: <input name="input_a" id="input_a" type="number" step="0.01" min="0.0" max="200.0" placeholder="Track A"><br/> 
        Track B: <input name="input_b" id="input_b" type="number" step="0.01" min="0.0" max="200.0" placeholder="Track B"><br/> 
        <br /> 
        <div id="result"></div> 
        Output: <output name="o" step="0.01" value="0.00" for="a b"></output> 
     </form>

しかし、私は、あなたがより広い背景が必要だと思います。

現在、クライアント側で動作するよく使われるJavaScriptフレームワークであるAngularJS tutorialをチェックしてください。

出典

2016-03-27 07:26:23 chenop

ここで、その番号を 'output'テキストボックスに表示するのに問題があります。今はそれがその上に表示されます。私はdivを動かして、 'output' idを変更しようとしましたが、それ以上のことはありませんでしたが、何も動かないようです。 'result'を' output'としてどのように置くことができますか？ – Alex

type="range"入力を使用すると、入力できる数字の範囲が制限されます。また、範囲入力は、モバイルユーザにとって使い勝手を向上させます。また、ユーザーが入力することができるようにするには、入力番号をjsで上書きすることができ、エラーメッセージを出力する必要はありません。

<script> 
     message = ""; 
     function select_formula() { 
      track_a = input_a.valueAsNumber; 
      track_b = input_b.valueAsNumber; 
      if (track_a > 200) { 
       input_a.value = 200; 
      } else if (track_a < 0) { 
       input_a.value = 0; 
      } else if (track_b > 200) { 
       input_b.value = 200; 
      } else if (track_b < 0) { 
       input_b.value = 0; 
      } 

      if(track_a > track_b) { 
       return "((track_a - track_b)/track_a) * 100"; 
      } else if(track_a < track_b) { 
       return "((track_a - track_b)/track_b) * 100"; 
      } else { 
       return "0.0"; 
      } 
     } 
    </script>

ユーザーにエラーメッセージを通知する場合は、エラーメッセージの専用タグを追加してください。 <span>または<div>は、デフォルトでは表示されず、エラー時にjsで表示されるように設定されます。

出典

2016-03-27 06:53:59

ユーザエラーのために "number"タイプの出力フィールドに文字列を返すjavascript

答えて

関連する問題