0
votes

Uncaught TypeError: impossible de lire la propriété 'toFixed' de undefined

Je sais que d'autres ont eu cette erreur, mais je pense que j'ai une sorte de problème de syntaxe qui cause cela pour moi. Si vous pouvez le trouver, je vous en serais reconnaissant. Je suis nouveau en JavaScript et je regarde ce programme simple depuis une heure.

Voici le JavaScript:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Future Value Calculator</title>
 <link rel="stylesheet" href="future_value.css">
 <script src="future_value.js"></script>
</head>

<body>
 <main>
     <h1>Future Value Calculator</h1>

     <label for="investment">Total Investment:</label>
     <input type="text" id="investment"><br>

     <label for="rate">Annual Interest Rate:</label>
     <input type="text" id="rate">%<br>

     <label for="years">Number of Years:</label>
     <input type="text" id="years"><br>

     <label for="future_value">Future Value:</label>
     <input type="text" id="future_value" disabled><br>

     <label>&nbsp;</label>
     <input type="button" id="calculate" value="Calculate"><br>      
 </main>
</body>
</html>

Et voici le HTML:

"use strict";
var $ = function(id) {
    return document.getElementById(id);
};

var calculateFV = function(investmentAmount, interestRate, yearsAmount) {
    var futureValue;

    //get the future value after the amount of years entered
    for (var i = 1; i <= yearsAmount; i++ ) {
        var interest = futureValue * interestRate / 100;
        futureValue = futureValue + interest;
    }

    return futureValue.toFixed(2);
};

var processEntries = function(investmentAmount, interestRate, yearsAmount) {
    var investment = investmentAmount;
    var interest = interestRate;
    var years = yearsAmount;

    var futureValue = calculateFV(investment, interest, years);
    $("calculate").value = futureValue;
};

window.onload = function() {
  $("calculate").onclick = processEntries;  
};

Merci beaucoup!

javascript onclick syntax-error tofixed

7 commentaires

Nvm, vous ne faites pas jQuery. Dans tous les cas, le problème avec le onclick ne passant que dans l'événement reste le problème principal

futureValue sera undefined si yearsAmount est inférieur ou égal à 1 raison de la boucle for

Cela aide-t-il à initialiser futureValue comme si var futureValue = 0; ?

@Taplar, pouvez-vous expliquer ce que vous voulez dire? Je ne comprends pas. Merci!

Lorsque vous affectez un gestionnaire d'événements (par exemple, someElement.onclick = function ), la principale chose qui est passée à la méthode lorsque l'événement se produit est l'objet événement. Pas d'autres paramètres attendus que vous mettez sur le rappel. Le premier paramètre sera l'événement. Si vous voulez passer d'autres choses, vous devez soit appeler la méthode vous-même avec les arguments, soit utiliser bind() pour changer ce qui est passé par défaut

@glitch j'ai essayé mais non ...

ressemble à futureValue ou interest a abouti à Undefined, pour garantir que cela ne renvoie pas Undefined, je remplacerais la ligne par futureValue.toFixed (2); avec let a = futureValue? futureValue: 0; a.toFixed (2);

3 Réponses :

4
votes

futureValue ne reçoit une valeur que dans le cas où la boucle i <= yearsAmount s'exécute au moins une fois. Cependant, il ne s'exécute même pas une fois: c'est parce que yearsAmount sera toujours indéfini. Pourquoi? Voyons comment cette fonction est appelée:

var processEntries = function(event) { //notice only the event will be given
    //text box values will be strings, so convert to number with Number()
    var investment = Number($("investment").value);
    var interest = Number($("rate").value);
    var years = Number($("years").value);

    var futureValue = calculateFV(investment, interest, years);
    $("calculate").value = futureValue;
};

C'est ici que calculateFV est appelé, donc les years doivent être indéfinies. years est juste le paramètre yearsAmount de votre en processEntries tête processEntries :

$("calculate").onclick = processEntries;

Nous savons processEntries que processEntries été appelé avec un troisième argument non défini.

Cette ligne est le coupable:

var processEntries = function(investmentAmount, interestRate, yearsAmount) {

L'événement onclick un élément n'est appelé qu'avec un seul argument: l'objet événement. Le code ne sait pas que vous souhaitez qu'il transmette les valeurs des zones de saisie intitulées investment , interest et years . Ainsi, au lieu de trois nombres, vous obtenez un objet événement et deux valeurs undefined . Au lieu de cela, vous devez sélectionner ces éléments et obtenir leurs valeurs dans processEntries vous-même.

Cela ressemblerait à quelque chose comme ceci:

var futureValue = calculateFV(investment, interest, years);

2 commentaires

AH, je viens de réaliser que tu as raison, je n'ai jamais eu les valeurs des zones de texte. Je suis sûr que cela m'aidera à résoudre le problème, merci!

il n'y a plus d'erreur, merci beaucoup pour la bonne explication!

0
votes

Vous devez récupérer les arguments processEntries() d'une autre manière. De cette façon, le seul argument que vous recevrez directement est l'objet événement. Dans la fonction processEntries , essayez plutôt de faire quelque chose comme ceci:

var processEntries = function() {
    var investment = $('investment').value;
    var interest = $('rate').value;
    var years = $('years').value;

    var futureValue = calculateFV(investment, interest, years);
    $("calculate").value = futureValue;
};

Vous devrez probablement formater correctement les textes après avoir saisi les valeurs, essayez de les consol.log dans un consol.log avant d'appeler la dernière fonction à des fins de débogage.

0 commentaires

0
votes

Dans certains cas, lorsque nous lions les données directement en html, il est possible que le chargement prenne un certain temps, nous pouvons donc obtenir l'erreur ci-dessus.

Dans mon cas, j'ai utilisé "?" opérateur

par exemple: - customer.price? .toFixed (2)

0 commentaires