JS - Typeof funktioniert nicht mit Eingabe | document.getElementById Problem

Ich muss um Hilfe bei der Lösung von zwei Problemen bitten.JS - Typeof funktioniert nicht mit Eingabe | document.getElementById Problem

document.getElementById.value in let gespeichert nicht mit innerHTML in einem anderen let gespeichert funktioniert. Ich habe ein paar ähnliche Themen gesehen, aber sie haben mir nicht geholfen.
Ein Problem erscheint, wenn ich die Nummer von typeof überprüfen muss, es läuft nur, wie JS es nicht sieht.

Hier ist mein Code. Danke für jede Beratung und Hilfe.

function wage() { 
 
    let input = document.getElementById('annualInput').value; 
 
    let output = document.getElementById('resultMonthly').innerHTML; 
 
    
 
    // it doesn't work, but it works with pure document.getElementById('result').innerHTML = input; 
 
    output = input; 
 
    
 
    /* 
 
     if (input !== '') { 
 
      // this if doesn't work even with string and number 
 
      if (typeof input == 'number') 
 
       document.getElementById('result').innerHTML = input; 
 
     } else { 
 
      document.getElementById('result').innerHTML = 'Please, type your annual wage'; 
 
     } 
 
    */ 
 

 
    // annual wage devided by 12 months 
 
    let resultMonthly = input/12; 
 
    let showMonthly = 'Your monthly wage: ' + resultMonthly.toFixed(2); 
 
    
 
    // monthly wage devided by 20 days 
 
    let resultDaily = resultMonthly/20; 
 
    let showDaily = 'Your daily wage: ' + resultDaily.toFixed(2); 
 
    
 
    // daily wage devided by 8 hours 
 
    let resultHourly = resultDaily/8; 
 
    let showHourly = 'Your hourly wage: ' + resultHourly.toFixed(2); 
 
    
 
    if (input !== '') { 
 
     document.getElementById('resultMonthly').innerHTML = showMonthly + ' $'; 
 
     document.getElementById('resultDaily').innerHTML = showDaily + ' $'; 
 
     document.getElementById('resultHourly').innerHTML = showHourly + ' $'; 
 
    } else { 
 
     document.getElementById('resultMonthly').innerHTML = 'Please, type your annual wage'; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Wage App</title> 
 
    <meta charset="utf-8"> 
 
    <title>Issue App</title> 
 
    <link rel="stylesheet" type="text/css" href="wageup.css"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="jumbotron">    
 
      <!-- the title and desc --> 
 
      <h1 class="display-4 text-center">WageApp</h1> 
 
      <p class="h6 text-center" id="paragraphTitle"> 
 
       This is a simple App for calculating wage by year, month, day and hour 
 
      </p> 
 
      <hr class="my-4"> 
 

 
      <!-- input-form --> 
 
      <form> 
 
       <div class="form-group"> 
 
        <label for="annualInput">Your annual wage</label> 
 
        <input type="annualData" class="form-control" id="annualInput" aria-describedby="hep" placeholder="Annual wage in $"> 
 
        <small id="help" class="form-text text-muted">We'll never share your wage with anyone else.</small> 
 
       </div> 
 
       <button onclick="wage()" type="button" class="btn btn-primary btn-sm" id="checkButton">Check</button> 
 
      </form> 
 
     </div> 
 
     <div class="alert alert-success" role="alert" id="resultMonthly"></div> 
 
     <div class="alert alert-info" role="alert" id="resultDaily"></div> 
 
     <div class="alert alert-warning" role="alert" id="resultHourly"></div> 
 
    </div> 
 
    
 
    <!-- JS --> 
 
    <script type="text/javascript" src="wageUp.js"> 
 
    <!-- Jquery --> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    <!-- Bootstrap --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</body> 
 
</html>

Quelle

2017-10-05 Adam

Was ist 'type =" annualData "'? und der Typ einer Textbox wird eine Zeichenfolge sein, es wird keine Nummer sein. – epascarello

Der Wert eines normalen Eingabeelements ist vom Typ String – user2520818

Problem 1:

output = input;

Das funktioniert nicht, weil output das Element nicht referenziert, wird die Innerhtml dieses Elements zu speichern.

Solving Problem 1:

Dein Kommentar ist ein guter Anfang:

document.getElementById('result').innerHTML = input;

Oder Sie das Element auf eine Variable speichern kann und dann die innerHTML-:

var result = document.getElementById('result'); 
// later on 
result.innerHTML = input;

Ausgabe 2:

if (typeof input == 'number')

Das wird nie wahr sein, weil in dem Wert Attribute eines Elements gespeicherten Werte immer Zeichenfolge sind.

Solving Problem 2:

Sie auf vielfältige Weise überprüfen können, ob die Eingabe eine String-Version einer Zahl ist, eine solche Art und Weise ist die Prüfung, ob die Zeichenfolge nicht NaN ist:

if (!isNaN(input))

Da es so viele Möglichkeiten gibt, diese Überprüfung durchzuführen, würde ich mich umsehen, um den zu finden, der für Ihren Anwendungsfall geeignet erscheint.

Quelle

2017-10-05 14:51:46 KevBot

Vielen Dank für eine schnelle Antwort. Ich habe eine Frage zu Ihrer Problemlösung 2. Ich habe das if zu Ihrem if (! IsNaN (input)) geändert, aber es akzeptiert immer noch Strings. Wie kann ich das ändern: if (typeof input == 'number') nur Zahlen akzeptieren? – Adam

Verwenden Sie 'input = + input', um die Zeichenfolge in eine Zahl umzuwandeln. Wenn er nicht kann, wird es 'NaN' sein – Kulvar

@Adam, es kommt darauf an, können Benutzer Kommas verwenden (zB:' 1,234.12')? Wenn sie es können, versuchen Sie nicht, Zwang auszuüben ('+ '1,234'' ist NaN). – KevBot

innerHTML und value sind eine "magische" Eigenschaft mit einem Getter und einem Setter. Sie können nicht direkt auf sie verweisen. Sie können entweder den aktuellen Wert speichern, der nicht aktualisiert wird, oder Sie können den Knoten jedoch speichern, um seine magischen Eigenschaften zu verwenden.

Eingabewerte sind immer Zeichenfolgen. Sie müssen es als Zahl mit dem unären Operator + umwandeln und dann das Ergebnis mit Number.isNaN() testen.

Quelle

2017-10-05 14:55:34 Kulvar

JS - Typeof funktioniert nicht mit Eingabe | document.getElementById Problem

Antwort

Verwandte Themen