Kullanıcı hatası javascript

için "sayı" türünde bir çıkış alanına bir dize döndürme Ben javascript ve html5 asmak için bir proje üzerinde çalışıyorum.Kullanıcı hatası javascript

Şu anda iki metin alanım var, input_a ve input_b. Bu iki sayıyı kullanacak bir çıkış alanım var (bütün veya kayan nokta olabilir) ve bunlarla ilgili bir hesaplama yapacak ve bunu çıktı alanına döndürecektir. Kolaylık olması açısından burada (CSS dosyaları görmezden) Bu nasıl ayarlandığını geçerli: Neyse ki

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

şu anda hiç kimse giriş metin alanına bir dize benim girdi number bir türde olduğundan can. Ancak, bu aralığın dışında bir kullanıcı geçersiz numara girerse, çıktının "Number must be between 0 BPM and 200 BPM" hata mesajını göstermesini istedim.

Şu an itibariyle bir alert() oluşturabilirim, ancak gerçekten kullanıcıyı kızdırmak ve hatayla o kadar ileri gitmem gerekiyor. Hatamın çıktısına yollanması için zaten var mı? Javascript için yepyeni biriyim, bu yüzden bu noktada birçok farklı öğreticiyi takip etmeye çalışıyorum. Doğru yönde herhangi bir yardım büyük beğeni topluyor.

kaynak

2016-03-27 Alex

En basit şekilde - hatayı ona eklemek için kullanacağınız bir div sahip olmak istersiniz. gibi şey:

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

Ama daha geniş bir arka plan gerek.

Lütfen, istemci tarafında üzerinde çalışılacak olan popüler JavaScript çerçevesi olan AngularJS tutorial'a bakın.

kaynak

2016-03-27 07:26:23 chenop

Şimdi bu sayıyı 'output' metin kutusunda göstermekte sorun yaşıyorum. Şu anda bunun üstünde görünüyor. Divanı hareket ettirmeyi, çıktı değerini değiştirmeyi ve daha fazlasını yapmayı denedim, ama hiçbir şey işe yaramıyor gibi görünüyor. 'Çıktısını' çıktı olarak nasıl ekleyebilirim? – Alex

type="range" girişini kullanmayı düşünün, kullanıcının girebileceği sayı aralığını sınırlar. Ayrıca aralık girişi, mobil kullanıcılar için kullanılabilirliği artıracaktır. Aksi takdirde, kullanıcının yazarak giriş yapmasını istiyorsanız, giriş numarasını js ile geçersiz kılabilirsiniz ve hata mesajı almanıza gerek yoktur.

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

Hata iletisiyle ilgili kullanıcıyı bilgilendirmek istediğinizde, hata mesajına özel etiket eklemeniz yeterlidir. <span> veya <div>, varsayılan olarak görünmez olacak ve hata durumunda js ile görünür olacak şekilde ayarlanacaktır.

kaynak

2016-03-27 06:53:59

Kullanıcı hatası javascript

cevap

İlgili konular