JS - typeof ne fonctionne pas avec l'entrée | document.getElementById issue

Je dois demander de l'aide pour résoudre deux problèmes.JS - typeof ne fonctionne pas avec l'entrée | document.getElementById issue

document.getElementById.value enregistrés dans let ne fonctionne pas avec innerHTML enregistré dans un autre let. J'ai vu quelques fils similaires, mais ils ne m'ont pas aidé.
Un problème apparaît lorsque j'ai besoin de vérifier le numéro par typeof, il fonctionne juste comme JS ne le voit pas.

Voici mon code. Merci pour tout conseil et aide.

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>

Source

2017-10-05 Adam

qu'est-ce que 'type =" annualData "'? et le type d'une zone de texte va être une chaîne, ce ne sera pas un nombre. – epascarello

la valeur d'un élément d'entrée normal est de type string – user2520818

N ° 1:

output = input;

Cela ne fonctionne pas parce que output ne référence pas l'élément, il stocke le innerHTML de cet élément.

Résolution numéro 1:

Votre commentaire est un bon endroit pour commencer:

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

Ou, vous pouvez stocker l'élément à une variable, puis définissez le innerHTML:

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

Problème 2:

if (typeof input == 'number')

Ce ne sera jamais vrai parce que les valeurs stockées dans l'attribut de valeur d'un élément sont toujours chaîne.

Résolution numéro 2:

Vous pouvez vérifier de nombreuses façons si l'entrée est une version de chaîne d'un nombre, d'une telle manière est le test si la chaîne n'est pas NaN:

if (!isNaN(input))

Comme il y a tellement de façons de faire cette vérification, je chercherais celle qui me semble la mieux adaptée à votre cas d'utilisation.

Source

2017-10-05 14:51:46 KevBot

Merci pour une réponse rapide. J'ai une question à résoudre votre problème 2. J'ai changé le si à vôtre if (! IsNaN (entrée)), mais il accepte toujours les chaînes. Comment puis-je changer ceci: if (typeof input == 'number') pour accepter uniquement les nombres? – Adam

Utilisez 'input = + input' pour transformer la chaîne en un nombre. S'il ne peut pas, ce sera «NaN» – Kulvar

@Adam, cela dépend, les utilisateurs peuvent-ils utiliser des virgules (ex: «1,234.12»)? Parce que s'ils le peuvent, n'essayez pas de coercition ('+ '1,234'' est NaN). – KevBot

innerHTML et value sont une propriété "magique" avec un getter et un setter. Vous ne pouvez pas obtenir une référence directe à eux. Vous pouvez soit stocker la valeur actuelle qui ne sera pas mise à jour, soit stocker le noeud pour utiliser ses propriétés magiques.

Les valeurs d'entrée sont toujours des chaînes. Vous devez le convertir en un nombre à l'aide de l'opérateur unaire +, puis tester le résultat avec Number.isNaN().

Source

2017-10-05 14:55:34 Kulvar

JS - typeof ne fonctionne pas avec l'entrée | document.getElementById issue

Répondre

Questions connexes