Anzeige eine Fehlermeldung auf einem HTML-Formular, dann entfernen, diese Meldung, nachdem Benutzer korrigiert Fehler

Ich versuche, mit HTML5 und JavaScript Grunde eine einfache Anwendung zu bauen. Ich habe es funktioniert, aber ich habe Schwierigkeiten, eine einfache Sache zu tun (zumindest einfach in anderen Sprachen, die ich benutzt habe). Hier ist mein aktueller Code:Anzeige eine Fehlermeldung auf einem HTML-Formular, dann entfernen, diese Meldung, nachdem Benutzer korrigiert Fehler

<!DOCTYPE html> 
<html> 
     <head> 
      <title>JS Test</title> 
      <meta charset="utf-8" /> 
     </head> 

     <script> 
      function isTrackValid(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 200 BPM"; 
       } 
       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 = isTrackValid(track_a, track_b); 
       if(message !== "") { 
        $('#error_message').text(message); 
       } else { 
        var result = calculate(track_a, track_b); 
        return result.toFixed(2); 
       } 
      } 
     </script> 
     <body> 
      <header> 
       <h1>JS Test</h1> 
      </header> 
      <form onsubmit="return false" oninput="o.value=eval(main());"> 
       Track A: <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" placeholder="Track A"><br/> 
       Track B: <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" placeholder="Track B"><br/> 
       <br /> 
       <div id="error_message"></div> 
       Output: <output name="o" step="0.01" for="a b"></output> 
      </form> 
     </body> 
</html>

Was ich haben will, für meine <output> zu zeigen, wenn der Benutzer eine Zahl zwischen 0 und 200 tritt in diesen output wird die richtige Antwort aus dem Javascript oben berechnet hat. Wenn der Benutzer eine negative Zahl oder eine Zahl> 200 eingibt, möchte ich, dass der Fehler in das Feld <output> eingegeben wird.

Mit dem aktuellen Code (und der <div> als Ergebnis einer Antwort auf StackOverflow), wenn ein Fehler auftritt, geht es über die . Wenn der Benutzer jedoch eine gültige Nummer eingibt, bleibt dieser Fehler dort und verschwindet nie.

ich mich gefragt, ob ich den Fehler weggeht machen könnte? Oder gibt es etwas, was ich tun kann, um es einfach auf gehen zu lassen, wenn es ungültig ist?

Quelle

2016-03-29 Alex

eine Geige please –

@GopsAB dies über JSFiddle tun scheint kein Fehler angezeigt werden: https: // jsfiddle. net/jthjzsjx/ – Alex

hast du jquery für _ $ ('# error_message') eingeschlossen. text (message); _? – C2486

You are not removing error message if value is valid. Also note, instead of using eval , you can bind events using JavaScript Event Binding on [type = number] elements.

Try this:

function isTrackValid(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 200 BPM"; 
 
    } 
 
    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 = isTrackValid(track_a, track_b); 
 
    if (message !== "") { 
 
    $('#error_message').text(message); 
 
    } else { 
 
    $('#error_message').text(message); 
 
    var result = calculate(track_a, track_b); 
 
    return result.toFixed(2); 
 
    } 
 
} 
 

 
var elems = document.querySelectorAll('[type="number"]'); 
 
[].forEach.call(elems, function(elem) { 
 
    elem.addEventListener('input', main); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form onsubmit="return false"> 
 
    Track A: 
 
    <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" placeholder="Track A"> 
 
    <br/>Track B: 
 
    <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" placeholder="Track B"> 
 
    <br/> 
 
    <br /> 
 
    <div id="error_message"></div> 
 
    Output: 
 
    <output name="o" step="0.01" for="a b"></output> 
 
</form>

Fiddle here

Quelle

2016-03-29 05:09:21 Rayon

Anzeige eine Fehlermeldung auf einem HTML-Formular, dann entfernen, diese Meldung, nachdem Benutzer korrigiert Fehler

Antwort

Verwandte Themen